Want to remove shop title and remove gap

Hi there,

Are you referring to the disable element option in the layout metabox?
https://docs.generatepress.com/article/disable-elements-overview/

If so that won't work for the shop page as it's an index page like the blog/archives page.

Try creating a layout element for it:
https://docs.generatepress.com/article/layout-element-overview/#disable-element

Hi there,

I have created layout element and tick content title and location set for front page as I am using shop page as front page.
but it doesn't work.
I want to remove that title section and gap completely so my image goes under the menu bar closely.
Thank you.

Regards,

Lee

Actually, try unchecking the Display page title option in the customizer:
https://docs.generatepress.com/article/woocommerce-overview/#shop

hi there, it it working, by the way there are still white gap margin between image and top bar menu how can I reduce the gap?
Thank you!

Regards,

Lee

Can you try using one container instead of separate containers and see if it works better for you?
https://docs.generatepress.com/article/content-layout/

There is also lots of top content padding added:
https://docs.generatepress.com/article/content-padding/

hi, separate containers doesn't work as it break top bar menu line.
by the way I tried content padding it seems better.

By the way It has white gap on the bottom of the page other than front page which was fixed by adding simple css (attached bottom) which you guys told me last time. but now it doesn't work. can you help me?
Thank you.

Regards,

//** Remove White Area Below the Footer **//
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container.grid-container {
width: 100%;
}
.site-footer {
margin-top: auto;
}

Hi Zun Min,

Glad you worked out the padding.

With regards to the whitespace at the bottom, I tried testing the CSS provided, and it works when I test it from my end.

See: https://share.getcloudapp.com/6quEqRE9

Can you try adding the CSS again through Appearance > Customize > Additional CSS and we’ll check if it’s working from our end. Maybe some caching mechanism is causing it not to work?

Hope to hear you soon! :)

Hi there,

It still doesn't work.

//** Remove White Area Below the Footer **//
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container.grid-container {
width: 100%;
}
.site-footer {
margin-top: auto;
}

Can you have a look into it?

double slash was causing the issue. it solved now. thanks!

Another question. how can I add button on the image on the front? I could add button but I can't position them where I want.
I want to put on the bottom middle of the front image.
Please let me know.
Thank you.

Glad you were able to figure out what’s causing the issue.

With regards to placing a button on top of an image, one approach to achieve this is through a structure like this: https://share.getcloudapp.com/d5uNKz7b

Here is what it will look like with some CSS: https://share.getcloudapp.com/jkumbJ52

If you want to implement this, kindly proceed with this structure and let us know so we can take a look and provide the CSS needed. :)

hi, yes, I want to make something like that but bottom and middle of image.
by the way I can't even put the image into the container? who can I do?

Here’s a screen recording you can follow to achieve this: https://share.getcloudapp.com/RBuyQ04w

I basically created a Container element and dragged the Image block inside.

Kindly let us know how it goes. :)

wow. thanks for the solution. got it sorted!!

by the way how can reduce the gap between front container and footer?

It seems white area quite big. I tried to change container padding from layout but it doesn't work.

Thank you.