Adding or changing elements independently to my responsive Design

Hi there,

can you share a link to your site so i can see that layout ?

It is not published right now, so I'm not sure if I'm able to share it by now.
What I want to know is, if there is a way to edit the mobile version independently, without changing the Desktop version.

Are you using GenerateBlocks to build the element ?

Yes, I'm using GenerateBlocks. Is there a way to change the Design separately?

If you're using a Grid Block to create a 2 column grid for example, you can use the Order field on Mobile ( and tablet ) views to change their display order - see here:

https://docs.generateblocks.com/article/container-overview/#order

Thank you,
I tried it and it worked fine.
Is there also a way to hide a Block only for Mobil?

If you're a GenerateBlocks Pro user, then any GB block, in the Advanced panel there are options to hide on various devices.
If Free user then you can use the hide-on-* classes on any Block :

https://docs.generatepress.com/article/responsive-display/

Thanks for helping me.
I use GeneratePress Premium.
So I think I also have GB Pro right?
I tried it with hide-on and it worked, but now I have another problem.
On my Desktop Version, I created 10 Icons in 2 rows 5 at the top and 5 underneath.
I worked with the Grid and somehow even if all icons are the same size and also the blocks are the same size,
the 5 elements underneath have more distance than the upper 5.
I also wanted only 2 Icons in a row on my mobile version,
but it splits the Icons in 2-2-1 and then starts with the second Row 2-2-1 could not find a way to make the rows connect,
so the last Icon of the upper row connects with the first Icon in the second row.

I use GeneratePress Premium.
So I think I also have GB Pro right?

GP Premium and GB Pro are 2 different products, you'll need to purchase them separately.

the 5 elements underneath have more distance than the upper 5.

The reasons can vary, can you link us to a page where we can see the issue?

but it splits the Icons in 2-2-1 and then starts with the second Row 2-2-1 could not find a way to make the rows connect,

Sounds like you are using 1 Grid block for the upper 5 elements, and another 1 Grid block for the lower 5 elements. I would suggest using only 1 Grid block for the total 10 elements, each of the element is set to 20% in width. In this way, you should be able to have better control on mobile.

Oh, I see. So the GB Pro has more functions right? I only purchased GP Premium.
Right now I have not published the site, so I'm not sure if it's possible to share the site with you.
I used 2 grids because when I click on the grid the highest range it showed me was 6 elements.
Is there a way to change it so I can have 10?
Thank you for helping me.

GB Pro adds a lot of convenience features, such as Global Styles, Local Templates, Asset Libraries ( for your own SVG icons and Shapes ) and Copy and Paste styles function plus some advanced functions including Advanced Backgrounds, Hover Effects, Custom HTML Attributes and more.

For that layout you don't need Pro. Starting from scratch:

1. Add a Grid Block, select ONLY 1 column.
2. Add your image to the column container and in the layout set the Width % to 20%. And then click the Tablet and Mobile tabs and set its width to 50% or whatever you need.
3. Now Select the Grid parent and click the + icon to add more columns see here:

https://docs.generateblocks.com/article/grid-overview/#adding-more-grid-items

Those new columns will match the settings of your first column, and when you reach the end of the row it will add a new row for you.

Thanks for helping me. It worked!
One last thing on the responsive design.
I created a navigation bar on my "home" page using >Layout >Top bar > bottom padding
to place the bar underneath the Header picture.
The problem is, that on Mobile it switches to the top again. I also noticed, that it also switches to the top on my desktop when I click on other pages in my navigation bar. Is there a way to have the navigation under the header picture on desktop and mobile?

I also added GB Pro now. I'm not sure If I have to create a new topic for that but I was wondering if there is a way to use one footer from the Blocks Pro Template section for all pages that I created without always having to add it to the Page. Can I use Blocks Pro also in the Customer area?

1. Can i see the site - so i can see what you have setup with the navigation?

2. Use a Block Element:

https://docs.generatepress.com/article/block-element-overview/

I did not want to publish it now, so after you viewed the Link please tell me so I can set it on draft again.

I also noticed now that I want to share the link, that it looks different in the preview area than when I open the customizer. I noticed, that the Bar is again on the top, but when I go to the customer it switches to the bottom.
I think it has to do something with the template I used right?