Archived topic
Layout element width options
9 replies · Started by Sam on May 26, 2021
Hi, I have some questions regarding creating a layout element:
1) I see you can do full width but there are no options for padding or margin? This is not desirable.
2) I notice this applies to the layout for both mobile and desktop. As the layout on mobile is full width already and looks just fine, is there a way to apply to the device type?
thanks
Hi Sam,
To answer your questions:
1. If you choose full width or contain in layout element, there will be no paddings.
2. There are no options to choose a different layout for desktop/mobile in the layout element.
Let me know if you need further assitance.
Hi Ying, thanks for your reply. So...
1) how do I add padding? If this is through custom CSS, why not set the container width with CSS as well?
2) This seems strange as layouts vary between mobile and desktop so you cannot expect to use a one size fits all approach?
thanks
Sam
Can you tell me what you are trying to achieve? So I can offer some custom solutions for you.
Hi Ying, a full-width container on shop archives and product pages with some padding so it does not edge to edge (this looks strange).
Mobile looks fine in the current customizer settings so I figure no need to mess with that.
thanks.
Then the best solution would be using CSS, try this one:
.post-type-archive-product .container.grid-container, .single-product .container.grid-container {
max-width: 100%;
}
Thanks Ying I will try this.
Do you think adding padding and margin options to the layout elements would be a good feature request?
Usually, the container options in the layout element are for a static page build with page builder or Gutenburg to give you a blank start. ( After GPP 2.0 with dynamic feature, it also would work for blog/archive page)
The paddings and margins would be set in page builder or Gutenburg.
That's why in your case it's better to use custom CSS than using layout element :)
Hi Ying, the above code only works on the product page and not the product archive page.
The CSS should work, can you link me to your site? I can have a look the code :)