[Resolved] Desktop and Mobile Versions of Articles

[William]

Hello

I have created an article that has images and text in it.

On desktop it looks fine with e.g. 4 images in a line within a grid (in separate containers), but when I preview in Mobile all the images are now stacked on top of each other. I can’t seem to change it only in Mobile view so that the layout isn’t messed up.

Is there a way to customise mobile-view without affecting desktop/tablet view?

Thanks

Will

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[William]

Hi,

I have put the page below, I think you should be able to view it. You can see the four images in a row which get squashed in when viewing on a mobile.

Thank you

Will

[David]

Hi there,

did you resolve the issue ? As i see 2 colums on mobile ?

[William]

Hi David,

Not really – I made changes to the desktop version that meant it looked better on mobile, but I would still like to be able to independently arrange the mobile version. E.g. use different photos for mobile that fit the screen better, maybe?

If I increase the photo size on mobile, the change also happens in desktop.

[David]

Am i looking at the right thing?

https://www.screencast.com/t/1ksAtCVVHN

[William]

Yes – So for example if I make the lifespan photo smaller, it will become smaller on the desktop view as well.

[David]

Aah ok … sorry being a little dense lol

If you have GenerateBlocks 1.5 installed ( latest version ). The there is a GB Image Block. If you use that instead of the core one then you can resize the images for Tablet and Mobile.

I recommend you select the Medium attachment size for desktop, and then use the width / height fields to resize on mobile.

[William]

Hi

What do you mean by GB Image Block sorry – is that a plugin?

[Matthias]

I think David means the plugin generateblocks – which has (i think) 6 blocks – one of them is an image block. It was currently added and has more options then the “normal” image block coming with wordpress.

btw – i had a similar problem with a grid in desktop vs mobile – i solved it by creating 2 containers – one shown on desktop+tablet – the other on mobile.

[William]

That solution looks like it could work, is there an example page showing how to add CSS to a specific container? Thank you

I see in your description that it could be annoying having two containers where only one would show depending on what device you are using

It would still be preferable to have the ability to edit a picture/container size depending on what it will be viewed in though…

[David]

William, you are using the GenerateBlocks plugin to create that grid.
In the latest version we added an Image Block:

https://docs.generateblocks.com/article/image-overview/

That comes with responsive controls

[William]

OK thank you I am going to play about with this and see how it goes.

Thanks again!

[David]

Let us know how you get on!

[Author]

Posts