Editing mobile site

pelvicptsam · Member · Jul 20, 2023 at 3:18 am
Copy link

Add topic to favorites
I love my website header on the desktop view, but it’s clunky on the mobile view. I simply just want to change the text size in the header in mobile so that it looks nicer.

How do I do this? I explored plugins, but I honestly don’t get how they work.

The blog I need help with is: (visible only to logged in users)
aleone89 · Staff · Jul 20, 2023 at 1:02 pm
Copy link
Hey there,

Thanks for reaching out and we can certainly help with this.

When looking at the site on a mobile, this is what I see:

To change the text size, you would most likely need some CSS to make those changes, which we can help write for you.

With regards to the menu and the submenu on a mobile, are you able to detail how you’re looking to change the size? (For example, are you looking to increase/decrease or bold the text to make it stand out more.)

A plugin wouldn’t help here in this instance, a plugin is usually used to add extra functionality to the site, whichever that may be.

I hope this helps so far, looking forward to hearing from you!
pelvicptsam · Member · Jul 20, 2023 at 5:53 pm
Copy link
Thank you for replying!

The menu on my mobile site doesn’t bother me… but the header does. Most other websites, have headers that are adapted to mobile websites. I would like for my header to be smaller so that it fits onto the mobile page.
pelvicptsam · Member · Jul 20, 2023 at 5:55 pm
Copy link
I don’t like how my logo is so big and my business name/link is underneath it. You have to scroll down to even see my website content, which I think is bulky and not professional looking.
pelvicptsam · Member · Jul 20, 2023 at 5:56 pm
Copy link
But when I am in the editor and I change my mobile site to how I like it, it changes my desktop site too.

How can I change my mobile site without changing the desktop view?
staff-totoro · Staff · Jul 21, 2023 at 1:00 am
Copy link
Hi there,

After a closer look it seems that the following CSS will help remove some of that whitespace. You can use this code, which affects the mobile view only, and does not change the desktop view:
```
@media (max-width: 599px) {
  .wp-site-blocks .site-header .wp-block-site-logo {
    margin-bottom: 5px;
    margin-top: 5px;
  }
}
```
Note that I chose 5px as the margin size of the top and bottom at random (it looked good to me) but you may want to edit those to be 10px or 7px or whatever suits your tastes.

Please also note that there is some extra whitespace in your logo graphic that you may also want to crop out. You can see here the true size of the graphic includes blank areas at the top and bottom:

If I can make a recommendation, I would try editing your logo to remove the whitespace first, and then try the CSS if that does not give you enough of a change. This fix may require either or both to arrive at the look you are after.

Hope that helps. Please let us know if you have any more questions.

No items found.