Responsive Header Bar w/Text

Support
#1

If you go to my website at http://fixmygateaustin.com you’ll see I created a second header bar above the main navigation bar that has contact info, but when I check the site on my phone or use a site like Screenfly to see the site at multiple screen sizes, it looks like this:

How can I make sure that the text shrinks on smaller devices?

thanks!

#2

Hi There,

Please add the following code to Theme Options CSS

@media(max-width: 480px) {
.hm3.x-text {
font-size: 12px;
}}

Hope it helps!

#3

It still looks the same unfortunately.

#4

Hi,

You can try this code instead.

@media(max-width: 480px) {
.hm3.x-text p {
     font-size: 12px !important;
}}
#5

Thanks so much! That solved it!

One other question: how do I make the titles on my slides responsive as well?

#6

Hello There,

Good to know that it works out for you. To make the titles in your slider responsive as well, please update the code above and make use of this code:


@media(max-width: 480px) {
  .hm3.x-text p {
     font-size: 12px !important;
  }

  div#slide-6-layer-1 {
     font-size: 20px !important;
  }
}

Hope this helps.

#7

Ok that worked as well, thank you so much!

Now that I am learning how to change the top text more, it’s not shrinking down anymore. Can you help me again with the top text above the navigation?

#8

Hi There,

I’d advice that you utilize the Responsive Text Settings instead.

This settings is on the Content builder, but you can use this on the header text too, you just need to apply a CLASS on your Text element and use that as the selector on your responsive text setting.

screenshot

Play with the compression, min-size and max-size until you get the desired look.

screenshot

Thanks,

#9

Thank you so much!

One more thing concerning the top header text: how can I center it? It just keeps staying left-aligned and I’d like it to be centered over the navigation bar.

#10

Hi There,

On The Bar where you have the text element. you need to select center on the horizonatal align.

Hope it helps!