CODEWITHSUNDEEP
htmlcsszurb-foundation
user3087394
user3087394

Reputation: 243

Adding different size text and images on the same line using Foundation 5

web design newbie here...

I've embarked on my first web design project and decided to use Foundation 5. I'm having a few troubles with the top of my website.. Unfortunately I cant post a picture on here of how i want it so ill try and describe it as best as i can.

I want the "Phone" and "Email" larger than the phone number and email address but all on the same line. Then I need the social icons to the right of the page, again all aligned.

I'm having trouble putting everything on the same row and having different styles for each character.

Here is what I have at the moment:

<div class="row hide-for-small">

  <div class="large-4 columns"><p class"contact-top">Phone <span class="smaller">- 0757776856</span> <span class="contact-top">Email<span class="smaller">- [email protected]</span></p></div>

      <div class="large-1 columns">
          <img class="social-btn" src="img/facebook-btn.png" alt="Facebook">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/twitter-btn.png" alt="Twitter">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/pin-btn.png" alt="Pintrest">
          </div>
      </div>

      <div class="large-1 columns">
            <img class="social-btn" src="img/google-btn.png" alt="Google+">
          </div>
      </div>

  </div>

And the CSS:

.contact-top {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-variant: bold;
display: inline;

}

.smaller {
font-family: 'Open Sans', sans-serif;
font-size: 12px;

}

I hope this makes some sort of sense, really hard to describe without images! Thanks

Upvotes: 0

Views: 245

Answers (1)

dsamardjiev
dsamardjiev

Reputation: 400

For the first part, some tags were left open so I fixed that.

Change:

<div class="large-4 columns"><p class"contact-top">Phone <span class="smaller">- 0757776856</span> <span class="contact-top">Email<span class="smaller">- [email protected]</span></p></div>

To:

<div class="large-4 columns">
  <p>
      <span class="contact-top">Phone</span><span class="smaller">- 0757776856</span> 
      <span class="contact-top">Email</span><span class="smaller">- [email protected]</span>
   </p>
</div>

For the second part if you can update this JsFiddle with the images so I can see what you are talking about (you can also see my changes there)

Upvotes: 1

Related Questions