Portfolio Project Trouble with Responsive Button Text

Code Feedback
1

Hi, folks.
I have a much simpler looking portfolio project than many I have seen here (which are awesome!), so am sort of ashamed to go public and ask for help on mine. That said, I’ve been looking in the forum for solutions to my weird-looking buttons but I can’t seem to find anyone with quite the same problem that i am having:

Buttons look okay on a wider display, but when I shrink the width, the mail button alignment looks funny.

Any ideas?

Thank you!
Sarah
P.S. I’ll take any feedback, if something else catches your editorial eye.

2

Care to share your button code?

3

Sorry…

1 Like
4

Hi Sarah, so after reviewing your code, you need to close your tags. What I notice when you check the console browser (F12) you get duplicate tags like so.

<div class="row">
    <div class="col-xs-10">
      <div class="btn-group btn-group-lg" role="group">
        <button><a href="mailto:srdasher@gmail.com" class="btn btn-default" target="_blank"><i class="fa fa-envelope"></i>Mail</a></button><a href="mailto:srdasher@gmail.com" class="btn btn-default" target="_blank">
        </a><button><a href="mailto:srdasher@gmail.com" class="btn btn-default" target="_blank"></a><a href="https://linkedin.com/srdasher" target="_blank" class="btn btn-default"><i class="fa fa-linkedin-square"></i>LinkedIn</a></button><a href="https://linkedin.com/srdasher" target="_blank" class="btn btn-default">
        </a><button><a href="https://linkedin.com/srdasher" target="_blank" class="btn btn-default"></a><a href="https://github.com/srdasher" target="_blank" class="btn btn-default"><i class="fa fa-github"></i>GitHub</a></button><a href="https://github.com/srdasher" target="_blank" class="btn btn-default">
        </a><button><a href="https://github.com/srdasher" target="_blank" class="btn btn-default"></a><a href="https://www.freecodecamp.org/srdasher" target="_blank" class="btn btn-default"><i class="fa fa-free-code-camp"></i>freeCodeCamp</a></button><a href="https://www.freecodecamp.org/srdasher" target="_blank" class="btn btn-default">
      </a></div><a href="https://www.freecodecamp.org/srdasher" target="_blank" class="btn btn-default">
    </a></div><a href="https://www.freecodecamp.org/srdasher" target="_blank" class="btn btn-default">
  </a></div>

When your original code is this:

<div class="row">
    <div class="col-xs-10">
      <div class="btn-group btn-group-lg" role="group">
        <button><a href="mailto:srdasher@gmail.com"  class="btn btn-default" target="_blank"><i class="fa fa-envelope"></i>Mail</button>
        <button><a href="https://linkedin.com/srdasher" target="_blank"class="btn btn-default"><i class="fa fa-linkedin-square"></i>LinkedIn</button>
        <button><a href="https://github.com/srdasher" target="_blank"class="btn btn-default"><i class="fa fa-github"></i>GitHub</button>
        <button><a href="https://www.freecodecamp.org/srdasher" target="_blank"class="btn btn-default"><i class="fa fa-free-code-camp"></i>freeCodeCamp</button>
      </div>...

So <a> needs a closing tag </a>.

Also, you need your closing tags

  <div class="container-fluid">

    <div class="target" id="targetabout">
      <h1>Hello.</h2>
       <p>
        <h4 align="left">I am Sarah Dasher.
          <p>
            <p align="left">I am a freeCodeCamp student.

              <p align="left">I have a Masters' degree in climate modeling.
                <p align="left">I live on the Texas/Oklahoma border, which in these parts, we call "Texoma".
                  <p align="center"> One summer, I walked from Mexico to Canada.
                    <p align> I like to learn, seek and do.</h2>
    </div>
  </div>

And spotted an error here, see if you can find it :wink:

         <img  class = "thumbnail" src = https://macissue.com/wp-content/forum/uploads/2017/11/Flashing-question-mark-at-startup-how-bad-it-is.png" alt = "Placeholder thumbnail">

Hope this helps!

5

Thank you!
I made all the changes you suggested, plus a few more that showed up in console view. Thank you for that suggestion.

Now I have a new problem, though, with my thumbnail captions disappearing and one thumbnail out of alignment…

I do appreciate your help.
Sarah

6

Your captions didn’t disappear, they happen to be in a color text you assigned. Highlight them and you’ll be able to see it.

As for the misalignment, it might have to do with how you assign your grid using Bootstrap.