Jump to content

Archived

This topic is now archived and is closed to further replies.

JasonLA

Shrinking text size for ™ in header and adding box behind text.

Recommended Posts

JasonLA

Hey guys, 

I am having a hard time making my ™ icons in my header fit appropriately. Every time I put them in they look huge. 

 

If you look on my site  (www.zox.la), I'd like to put one in the area next to YOUR NEW FAVORITE WRISTBAND. at the top. It's a text box with this in place now: 

 

<h1 class='zox-masthead'>Your New Favorite Wristband.</h1>

 

I've tried to add it using the shortcode for ™ and that doesn't work. Any ideas?

 

Secondly -

 

If you look at the 4 canvases below that, you see hero sections in each one. I'm looking for the best way to make that text more visible, especially on mobile devices where it may go over a different portion of the background image. Was thinking maybe a light opacity box behind the text area? Just want it to look clean and stay readable. 

 

Any suggestions are appreciated! 

 

An™

Share this post


Link to post
Share on other sites
Danny

Hi,

 

For the Trade Mark you have wrapped in a span element and given it a class. Firstly, the class has "" around it you will want to remove these and then add the following CSS. You may want to alter the code to your liking:

 

.fs-10 {
font-size: 20px;
vertical-align: 38px;
}
 
For the Text in the Hero section add the following and have a play with it, see what you think:
 
.section-hero .pl-hero {
background: rgba(255, 255, 255, 0.8);
color: rgba(0, 0, 0, 0.956863);
text-shadow: none;
border-radius: 7px;
box-sizing: border-box;
padding: 8px 10px;
box-shadow: rgb(102, 102, 102) 0px 0px 6px 0px;
}
 
The code above is rough, as I did it in seconds, but it should give you a start.

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
JasonLA

Thanks Danny! The Hero section works perfectly, that's exactly what I needed.

 

For the TM part, I'm just having an issue with the positioning of the TM on mobile devices. If you look at my site now, it looks great on a computer but the TM adds some weird spacing to the text on mobile. Check this out: http://screencast.com/t/2vunhWLtjNkc

 

I'm guessing that it has to do with the code I added into LESS:

 

.fs-31 {
font-size: 30px;
vertical-align: 81px;
}
 
My Masthead that is follows has this:
.zox-masthead {
  font-size: 150px;
  color: @white; 
}
 
Is there a way to do vertical align to match the masthead in a percentage without making the TM larger? 
 
Thanks!
Jason

 

Share this post


Link to post
Share on other sites
Danny

OK, Jason, remove the CSS you're using for your TM symbol and try this instead, I think its better than using vertical align, due to the issues you're having at the moment when viewing on mobile devices.

 

Try this instead:

 

.fs-31 {
font-size: 31px;
position: relative;
bottom: 2.5em;
}
 
Now to resolve your issue on mobile devices, you're going to need to use a media query. Something like this (very rough):
 
@media (max-width: 767px) {
  .fs-31 {
    ...
  }
}
 
You will need to play about with the bottom: property to get it positioned correctly.

Please be aware that we can not provide any further assistance to this kind of customization and if you encounter any further issues, you will want to ask your question on a forum such as Stack Overflow.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×