[Support request] Resize images on mobile devices

[Charles]

Hi there,

I’m using the Generateblocks plugin and I’m unsure how to control the size/width of an image on mobile devices.

If you could let me know how to achieve this that would be great.

Charles

[David]

Hi there,

make sure you add a GB Image Block ( not the core one ).
Add the block to the page, and set it up for your Desktop.
Then change the Preview to Mobile, and you can use the Width and Height fields to resize the image

[Charles]

Hi David,

That’s great, thanks for your help.

Another quick question. How could I make an inner container contained on desktop and full width on mobile?

Charles

[David]

So as long as your Inner Container is wider then the Mobile screen the it will be full width.
You just may need to remove the Padding from the Container Block. Again you can do that just for mobile when Previewing it.

[Charles]

Hi David,

Awesome, thank you. One more for today 🙂

I’m trying to center lists in their columns at the top of this article. I’ve given them a CSS class but can’t seem to get it to work.

If you could let me know what I’m doing wrong that would be great.

Charles

[Fernando]

Hi Charles,

Can you add my-container to the column container, and then add this CSS?:

.my-container ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[Charles]

Hi Fernando,

Thanks for that. Is there any way to keep all the bullet points aligned on the left hand side? Would that need to be done with margin rather than center aligned?

Charles

[David]

Change the CSS that Fernando provided to:

.my-container ul {
    max-width: max-content;
    margin: auto !important;
}

[Charles]

Awesome, thanks David.

Charles

[David]

You’re welcome

[Author]

Posts