H1 in mobile devices

Support
#1

hi folks,
i want to reduce the size of the headline/heading on small screens.
it is the h1 “looks like” h2.
on each side except home and blog.
only the headings should be addressed.
other h2 should remain untouched.
can you please help?
bg,
christian

#2

i want to use the responsive text in cornerstone. is it normal to have to create a new responsive text item for each page?

#3

Hi Christian,

Yes, we can use responsive text and we have to set it per page. There’s a plan to implement global responsive text but it we can’t promise an ETA. For now, either we use responsive text set per page or we can use CSS media queries. For example, on each of those custom headline class field, we can add resp-headings. Then using CSS we will define the class font size like below:

@media (max-width:480px){
   .resp-headings{
      font-size: 20px; /* Adjust font size accordingly*/  
   }
}

Every time we add the class resp-headings on the headings class field, that CSS will take place and adjust font size. No need to setup responsive text.

This might help: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

1 Like
#4

Hello Lely,

I have a similar issue. I also want certain headings to display smaller on small devices. I have tried using your CSS in the heading’s class field, but nothing happens…

I have some headings that are h2 but look like h1 in large screen design, but they are huge on the mobile, so want them to look smaller only on mobile.

Using X Theme, Integrity stack.

Many thanks,
Jonathan.

#5

Hi There,

Thanks for writing in! Yes you can use “Responsive Text” in Cornerstone – http://prntscr.com/ca5caq

Let’s add a selector there with minimum and maximum font-size – http://prntscr.com/ca5cgm

Then use the selector in Class field for your Custom Headlines – http://prntscr.com/ca5cq2

Hope this helps.

Cheers!

#6

Hi, how do we do this in Pro? I need to reduce the font size of my H1 headings in Pro.

Thanks,

NJ

#7

Hi there,

We totally understand that your question is the same as the one posted n the original thread. But this thread is 2 months old and we encourage you that you open up a separate thread to follow up the case.

Meanwhile you can check this thread for further reading regarding the Responsive Text options you have at hand which the title question is somehow related to:

Thank you.