Mobile Issues

Hi Adam,

Would you please link us to the site in question?

You can use the private information field.

Let me know :)

Hello, thanks for the quick reply.

Website is http://www.sfy.org.uk

Go to the vehicle graphics and wraps section. I've managed to sort the mobile menu problem, so it's just the layout issue on mobile now.

Do you mean the blue circle background image is not responsive?
https://www.screencast.com/t/5dfGIlssRusl

If so, you could try adding another container above the text using the image as a background image instead of giving the entire text container a background image with massive top paddings.

Btw since you are already using Generateblocks, try Grid block from GB instead of WP columns block, it allows you set different spacing for desktop/mobile/tablet.

Let me know :)

Thank you for this.

I have downloaded GB Pro and I like it alot. However, i am still having mobile layout issues and issues with padding.

On http://www.sfy.org.uk/vehicle-graphics-and-wraps , I cannot set up a mobile friendly photo for both desktop and mobile without having serious layout placement issues. I also can't control the unnesscary amount of padding there is at the bottom of the container, even though Bottom padding is set to "0"

Sorry for being a noob!

No worries, building a website is a long curve of the learning process.

I inspected the first image, you are using WP paragraph for the text, it comes with a huge margin(orange part) below by default, you'll have to use CSS to change it.
https://www.screencast.com/t/WOGDQehD

I would suggest using Headline block from GB, you could choose it to be a paragraph as well (headline block is not only for headlines), and it allows you to adjust paddings/margins.
https://docs.generateblocks.com/article/headline-overview/

Some default WP blocks cause horizontal scroll which is not friendly for mobile nor desktop.

So try to replace wp columns with GB Grid blocks, replace texts with GB headline blocks, replace WP buttons blocks with GB buttons block.

Trust me, it will make your life a lot easier :)

Thanks, it is making life alot easier!

Sorry, another new problem

What ive edited and what its shows on the edit page is no what is being shown on the live site. The photos should be next to the "Step" informaiton, which it is on the page editor, but not live?

Because this text container is not a grid container which means it takes 100% width of the screen and it can't share the width with the images.
https://www.screencast.com/t/POpB0S16mrkp

But based on your design, I think the better structure to be fully responsive on mobile as well would be as below:
https://www.screencast.com/t/QMrauG4KX8

Then you can set different widths % for different devices.

Thanks for coming back to me.

Sorry, I don't follow. I can change the values in the grid view, but what you sent me on your screen shot doesn't match to what i have got?

Again, sorry!

I'm afraid the container width % you can adjust is for an empty grid column:
https://www.screencast.com/t/yooa4azvZoZ

This documentation about Grid block might be helpful:
https://docs.generateblocks.com/article/grid-overview/

Thank you so much for your help, I think i am there!

Last question - Is there any way of changing the order in which the content is displayed?

I have a container with a grid, of 2 columns. I want the right side of the column to show first on mobile, is that possible?

Hi there,

select the right hand container in the grid, go to sidebar Layout and change to mobile view. You will see an Order field, add -1 to that field.