Desktop v. Mobile Sizing

Could you help me understand the differences in sizing I’m experiencing? For example, on my home page (link in private comments) the headers are larger but on mobile the headers are small and the regular text is larger. I have the headers (red) on maximium size.

Also, the hero image on desktop is larger than the lower images but the opposite is true on mobile.

It looks very off on mobile and I don’t know how to change it.

Thanks

Hello,

the headers are larger but on mobile the headers are small

As you can see on the desktop you have your header in two rows and logo is big, on mobile it becomes in one row to be compact.

You can configure your header going to Woodmart > Head builder http://prntscr.com/iyd2pe

Choose the proper header type (your current) http://prntscr.com/iyd333

Modify elements as per your needs: http://prntscr.com/iyd3h3

Take into consideration that there is also the mobile view of your header http://prntscr.com/iyd3v3 check all the elements there.

If you need help, please describe what would you like to get in result I will help you to configure.

Best Regards

Thank you for the info. I’m very sorry, I used the wrong wording. By ‘header’ I meant the Large red title text, not the top header. On desktop I’m able to change the size of some of the text to be larger, but when on mobile it switches.

The larger text ‘Section Titles’ are larger than the ‘Text Block’ but on mobile the Text Block becomes much larger than the Section Titles and doesn’t look great.

Thanks

Hello,

You need to switch to mobile view in Header builder and try to set the different width of the logo. The height is set automatically depending on logo width. So,

Please navigate to Woodmart > Head builder http://prntscr.com/iyd2pe

Choose the proper header type (your current) http://prntscr.com/iyd333

Go to mobile view of your header http://prntscr.com/iyd3v3

Set the logo width and height would increase. http://prntscr.com/jbdqcv

Increasing logo take into consideration the height of sticky header http://prntscr.com/jbdqud

As for other elements, please send me screens and page links

Best Regards

Thanks for your help.

I’m not actually intending to talk about the Header.

I’m referencing the “headings” throughout the page. On desktop the Titles (red) are larger and the text is smaller. On mobile, its the opposite.

Why are the “headings/titles” which are set to “Large” size on WPBakery shrinking to very small but the regular text doesn’t change at all (thus ends up being much larger)?

My site is in the private comments. This is happening on the home page. The title text is becoming so much smaller, but the regular text doesn’t change at all.

Thanks

Hello,

Titles are resized to fit the mobile narrow screen at the same time the regular text is not resized to be visible enough on mobile. If the title is not resized it will be cut on mobile.

Best Regards

Thanks, is there any way to change this? The titles need to be larger to make sense. Can you like add a class and change the size on mobile or something via css?

Hello,

In order to change sizes you will need custom CSS, please titles types I will provide CSS.

Best Regards

Thank you! In WPBakery it’s “section title.”

Not sure if that’s what you need, if not it’s “Delicious Inspiration” on my site homepage (link in private comments).

Hello,

You can use WP Bakey Page builder Custom heading. This element is fully configurable.

Best Regards

Works perfectly, thanks!

You are always welcome! If you have any questions feel free to contact us.

Best Regards

[Author]

Posts