[Resolved] Site logo not good on mobile

[David]

I have a site logo in my header which was created in the elements section. It is where i want it to be on desktop but on mobile it does not look good. Do I have to add custom CSS to get this right? Or, are there customization settings that are unique to the mobile display? For example centering, margin, padding etc. If there are, how do I get to them? I there are not and it has to be custom CSS, would that CSS be unique to mobile or any CSS is for both and you have to make the code percentages or whatever to make it responsive? Sorry I’m new to this and I’m trying to figure out how I’m going to tackle these problems.

[Tom]

Hi there,

Have you tried out Mobile Header option?: https://docs.generatepress.com/article/mobile-header/

It might be worth a shot.

Let me know 🙂

[David]

I can try that. I guess I’m asking a more general question though about how to design in this theme. How do I manage working with the demands of getting things to line up in mobile vs desktop. Are there setting for each? For example centering, margin, padding etc. If there are, how do I get to them? If there are not and it has to be custom CSS, would that CSS be unique to mobile or CSS changes impact both and you have to make the code percentages or whatever to make it responsive? Sorry I’m new to this and I’m trying to figure out how I’m going to tackle these problems.

[Tom]

Hi there,

We add options for mobile where we think it’s completely necessary (you’ll see a mobile icon along with the option where this is possible).

We’ll be adding more tablet and mobile options in coming versions as well.

In most cases, your desktop design should just work on mobile with a few small tweaks.

[David]

That really doesn’t answer my question but I’m going to consider it resolved and look elsewhere.

[Tom]

Sorry about that. If there’s a mobile option in the Customizer, you’ll see a little mobile icon next to the option.

If you need to use CSS, you’ll want to look at media queries to apply CSS to mobile only. For example:

@media (max-width: 768px) {
    /* CSS in here applies to mobile only */
}

[Author]

Posts