Jump to content

Archived

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

lroberts00

Text off when view responsive

Recommended Posts

lroberts00

Could someone help me with this site when you view it responsively? 

 

The text ("conditioning" & construction" & other h1 headings) is cutting off and overlapping into the blue, making a huge scroll to the right on mobile devices.

 

www.briansheatandairss.com

 

 

Thanks

Share this post


Link to post
Share on other sites
Danny

Hi,

 

This is because you're using custom CSS for all those header tags. If you wish to have a custom font size, you will want to use custom CSS like you have already. However, you will then need to use a media query to reduce the size for mobile devices.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lroberts00

No all I have is Google Fonts and its still off?  Could you take one more look?

Share this post


Link to post
Share on other sites
Danny

I am not quite what Google webfonts have to do with your custom code. However, I have just this moment viewed your site and you appear to have removed the custom font-size that was using pt and this has resolved your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lroberts00

Well, not everything is resolved.  Some of the H1 headings are still overlapping.

Share this post


Link to post
Share on other sites
Danny

You're going to need to reduce the size of your header tags font-size. You can either do this universally using:

 

h1 { font-size: 26px; }

 

or you can keep it at the same size, but instead use a media query to reduce the font size on mobile devices, such as:

 

@media screen and (max-width: 568px) {

  h1 {

    font-size: 24px;

    }

}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×