Mobile site design

webmasterUPSTATE · Feb 21st 2023, 5:42pm

Hi there. I am really struggling to make the mobile design for my Brooklyn theme site viable. The desktop looks good, but the mobile is not usable at this point. At times, I need to change things on the mobile - such as margins - but when I do that, it changes it also on desktop. Can you please direct me to some specific tutorials on how to fix the mobile site? Or give me some other resources on how to make this work? The tools that I see in WP Bakery make me feel like I'm just guessing at what will work...and nothing seems to.

What is also very frustrating is that the views for the mobile phone aren't even close to accurate (at least on my phone).

See image attached. I tried many different options within the responsiveness mode and cannot seem to make this copy not look crazy.

Thanks. -Danielle

Matthias · Feb 21st 2023, 6:15pm

Hi,

could you please share a link to your site?

This does not look like a regular mobile site of our theme - are you using any plugins for mobile site design? Such as AMP

It would also be interesting which mobile resultion is displaying on the screenshot.

webmasterUPSTATE · Feb 21st 2023, 6:21pm

Thank you for your response.

The page I was showing you is upstatelgbt.org/?page_id=4456

I'm not sure about the resolution. Do I need to set that?

Matthias · Feb 21st 2023, 6:32pm

Hi,

thanks for the link.

The issue for the text shown on the screenshot is, that you have worked with a fixed margin right of 150px.

This will be transfered to mobile as well.

I would recommend making a duplicate of that row and then you remove the margin right on the duplicated one and activate the option "Hide on Desktop".

and for the original row you activate "Hide on Mobile" - this way the spacing will not occur on mobile.

webmasterUPSTATE · Feb 21st 2023, 6:59pm

I'm not sure I understand, are you saying I will have two of the same rows but hide one of them on desktop and hide one on mobile?

Any advice on re-centering images, changing margins, changing image sizing for mobile only?? (see attached)

Thanks again.

Here is the link: upstatelgbt.org/?page_id=4221

Matthias · Feb 21st 2023, 7:06pm

webmasterUPSTATE wrote:

I'm not sure I understand, are you saying I will have two of the same rows but hide one of them on desktop and hide one on mobile?

Yes this way you can design / adjust one for desktop and the other one for mobile. But both have the same content.

webmasterUPSTATE wrote:

Any advice on re-centering images, changing margins, changing image sizing for mobile only?? (see attached)

Basically the same steps. If you work with fixed sizes on desktop it can lead to issues on mobile.

The mobile text images need a background size contain instead of cover.

Where can I find the page Thriving Community?

webmasterUPSTATE · Feb 21st 2023, 7:12pm

Here is the link: upstatelgbt.org/?page_id=4221

So, are you basically saying, that for my desktop design it would be better to set margins and padding in % instead of pixels? If I do that, my desktop design will likely look better on mobile?

Matthias · Feb 21st 2023, 7:23pm

webmasterUPSTATE wrote:

So, are you basically saying, that for my desktop design it would be better to set margins and padding in % instead of pixels? If I do that, my desktop design will likely look better on mobile?

You can try that as an alternate solution but what I meant is that you have 2 elements with the same content one displaying on desktop and the other on mobile, so that you can manage them individually.

webmasterUPSTATE wrote:

Here is the link: upstatelgbt.org/?page_id=4221

Please use the given options here. In Brooklyn Metapanel you can define an extra image for mobile with its own position.

webmasterUPSTATE · Feb 21st 2023, 8:03pm

Thank you for all of your help!

Mobile site design

Mobile site design

webmasterUPSTATE wrote:

webmasterUPSTATE wrote:

webmasterUPSTATE wrote:

webmasterUPSTATE wrote:

Share

Tags

Similar Threads