[Resolved] Font and Headline sizes on mobile and tablet (responsive design)

[Erika]

Good morning,
some things are not working in responsive design which worked on another site well and I cannot see a difference. Pls help.

#1 In GP Customize:
At the new site when I set the headline and font sizes for desktop they are also set for tablet and mobile. If I change the font sizes on tablet or mobile, they also get changed on desktop. My custom CSS does not include the style.css line.

Also I would like to have the background image only on desktop. I thought if I set it in the Customize differently than the image won´t be there on tablet and mobile. Or is it an issue for disabling elements or for hiding on tablet and mobile?

#2 In the CSS
In the hook abover the header with the contact I have set the width of a cell for desktop, tablet and mobile in CSS. Desktop and mobile take over the changes, work well. For the tablet the mobile settings are applied. The breakpoints seem not to be right.

Here is it:
/*tablet*/

@media (min-width: 769px) and (max-width: 1024px) {

.contact-phone	{
	width:400px;
	font-size:11px;
}

}

/*mobile*/
@media (max-width: 768px) {

.contact-phone	{
	width:110px;
	font-size:11px;
}
	
}

Thanks, Erika

[Leo]

Hi there,

#1
Currently I’m seeing the mobile header feature activated so there isn’t actually site title on mobile.

There isn’t a header background image added either?

#2

Instead of using a hook, have you considered using the top bar widget area? Then it should be nicely responsive by default:
https://docs.generatepress.com/article/top-bar-widget-area/

Let me know if this helps 🙂

[Erika]

Hi Leo,

sorry, I was not clear on #1. I meant the font size for body, H1, H2 and H3. If I make changes in the Customizer, tablet and mobile are set the same or all devices get set the same. I.e. I set the body font to 16px, it sets body font to 16px. I go to tablet and set it for tablet 14px, it sets the font-size for all devices to 14px. It is crazy. What did I do that the Customizer behaves like this?

On the background image: there is the background image, it is only invisible on tablet and mobile, therefore I could actually take it off at tablet and mobile, but encounter the same problem like above. Either the background image is added on all devices or it is not added on any one.

#2 Thanks, this is an excellent solution saving a lot of additional css again. I guess I make to my homework to read the whole documentation… Is there a chance to place a vertical line between phone number and mail-adress?

Thanks a lot, Erika

[Erika]

By the way, I activated the logo and title now on tablet and mobile and it behaves the same. No chance to set the devices separately.

[Leo]

#1 Hmm body font doesn’t actually have responsive options currently? If you are referring to the control at the bottom right of the customizer, those are preview features from WordPress.

If the fontsize has responsive control, then it would have the toggle right beside the option like this:
https://www.screencast.com/t/53i9qyShBf

Same thing for the background image. There isn’t a responsive setting.

If you only want the body background on desktop, you can use this CSS and remove the setting in the customizer”

@media (min-width: 769px) {
    body {
        background-image: url(https://theaterzwerg.de/wp-content/uploads/2019/02/curtain.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-attachment: fixed;
        background-position: center;
    }
}

The logos should be responsive by default.

[Erika]

Hi Leo,
you might consider a responsive toggle to body image and the background setting in a later GP version. There are times, it makes no sense to post the background on tablet and mobile and some fonts which does not look good on mobile with a big font size.
Also for the top bar it would be useful to have a font-size setting toggle as a setting for desktop with the contact information might be just too long for mobile.
At this time I simply have adjusted these things for tablet and mobile per css.
Thanks 🙂 Erika

[Leo]

Background images aren’t responsive by nature. There isn’t anything GP can control there.

We will keep the top bar suggestion in mind. If it comes up more often then we will definitely consider it.

Glad you figured out 🙂

[Author]

Posts