Resize images on mobile devices

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

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

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.

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

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;
}

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

Change the CSS that Fernando provided to:

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

Awesome, thanks David.

Charles

You're welcome