mobile responsiveness

Hi Marjorie,

Your site on mobile looks responsive.

I'm not sure what you mean by on mobile is not fixed .

Can you explain more?

The homepage, when I view it the steps are not in the correct order. It list step 1, 4,2,5,3 and 6. The learn and grow section has no space between the grids.

when I view it the steps are not in the correct order. It list step 1, 4,2,5,3 and 6.

I see what you mean. The way you built the Grid is incorrect which is causing the issue.

I would recommend a structure like this:
https://www.screencast.com/t/wnCFKxiKR8

The red part is the first layer of Grid, set the left column to 40% width, the right column to 60% width.

The yellow part is the second layer of Grid which is located inside the left column of the first layer, set each of the yellow grid container to 33% width.

The learn and grow section has no space between the grids.

Not sure what you mean, there is space between the grid columns.
https://www.screencast.com/t/oPjpHL8cB

Thanks it's fixed, but you did not tell me how to fix, The learn and grow section has no space between the grids.

The learn and grow section has no space between the grids.

You mean the mobile?

Try add some vertical gap to the Grid.

Let me know.

Thanks it’s fixed, but you did not tell me how to fix,

I don't understand, so it's fixed?

Hello

I'm still having trouble with the mobile version of my site.

1. In the first section, the last 3 steps are too close to each other

2. In the second section some of the download buttons are too close to the image.

3. Everything is wrong on the 3rd section. It shows ok on desktop

https://marjorieduncan.com

How do I fix them please

1. I see you are adding a wp-block-spacer to the step 1,2,3 which is unnecessary.

You just need to set a vertical gap for the Grid block, see the instruction below:
https://docs.generateblocks.com/article/grid-overview/#editing-the-grid-block

2. Your buttons margin setting is inconsistent, for example, the 1st download button has 20px bottom margin on Button, and 10px bottom margin on Buttons, while the 2nd button doesn't have the 10px bottom margin on Buttons, see screenshot below:
https://www.screencast.com/t/Hux7LmalivpH

3. You've set 200px left/right margin for the container block on desktop and the mobile inherits the setting, you need to make sure the spacing setting is correct on mobile for responsiveness.
https://www.screencast.com/t/7GXtoGe2JRG

And for a layout like this, there's absolute NO need to use any Grid block at all.

Hope I made it clear :)

Hi

I checked margins and I'm not seeing 20px etc, I see 15px only on all.

I didn't really understand any of that response except for #1 and it still didn't fix the issue.

I certainly did not understand a layout need no block part

A little clarification on all please.

Thanks

#1, you've added vertical Grid gap to the Grid that contains step 1,2,3, but not to the Grid that contains step 4,5,6, so please do so.

#2, all 3 buttons has different spacing settings on mobile:

The Download business plan bundle button a 20px bottom margin on mobile

The Download mindset bundle button has a 20pxbottom margin for Button and a 10pxbottm margin for Buttons on mobile.

The Download website bundle button inherits 15pxmargin from desktop on mobile.

Please check the mobile margin settings of a block by clicking the mobiletab.

#3, I said NO Grid block is needed, not block. The simplest structure for this section is like this:

Container 
  >Headline 
  >Container
    >>Headline
    >>Headline
  >Container
    >>Headline
    >>Headline
  >Container
    >>Headline
    >>Headline

Hi

I got number 1 and 2 fixed.

I made the recommended changes and only the headling fix. The blocks with the headline is not showing.

Checked your #3 new structure, that's exactly what I mean! Good job!

Then only thing you need to modify is the yellow container's left/right margin for tablet and mobile, they are currently inheriting the 200px left/right margin from desktop settings.
https://www.screencast.com/t/mxCFHYASw