How to edit mobile version without editing desktop version?

lpmecanique · Member · Aug 21, 2023 at 8:31 pm
Copy link

Add topic to favorites
Hi! I’ve looked up pretty much everywhere. I am new with WordPress.
How can we edit mobile version without editing desktop version?

The theme I chose is responsive, but some part of it looks a bit weird. I wanted to edit the appearance of the mobile version. Thank you very much for your help!

The blog I need help with is: (visible only to logged in users)
supernovia · Staff · Aug 22, 2023 at 11:34 pm
Copy link
Hi @lpmecanique,

The theme I chose is responsive, but some part of it looks a bit weird. I wanted to edit the appearance of the mobile version. Thank you very much for your help!

It really depends on the theme and what you hope to do. Sometimes there’s a way to adjust the settings in the Site Editor or Customizer; other times it requires a bit of CSS.

Can you share what you have in mind? We’ll point you in the right direction.
lpmecanique · Member · Aug 25, 2023 at 9:45 pm
Copy link
Hi @supernovia!

Thanks for the reply! I want to be able to stack the images from the Galery on the mobile view. Also, I want to modify the header to make it looks less weird than it is actually – maybe by removing the logo or placing it differently.

Thanks for the help!
staff-totoro · Staff · Aug 25, 2023 at 10:33 pm
Copy link
Hi there,

For your header on mobile, I actually thought it made more sense to hide the title text (since it consumes so much space in layout) and instead allow the logo to remain visible.

You can try this code to see if it works for you:
```
@media only screen and (max-width: 600px) { 
  /* Hide site title on mobile */
  .wp-block-site-title {
    display: none;
  }
}
```
For the gallery, this code will create a single column view on mobile.
```
@media screen and (max-width: 480px) {
  /* Single column gallery on mobile */
    .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
        width: 100%;
    }
}
```
Note that I chose 600px for the first code and 480px for the second code based on what looks good to me, but you can edit those values if you wish. For example, if you want the gallery to go to single column on a tablet view as well as smartphone, a larger value like 700px will allow both screen sizes to be overridden by this code.

Hope that helps. Please let us know if you have any more questions.
lpmecanique · Member · Aug 26, 2023 at 12:45 am
Copy link
It works perfectly! Thank you so much!!

No items found.