How can I adjust this section to be shown full width?
Here is the url and password:
nikthe
Topic summary
A Shopify store owner needed help making a product page section display at full width instead of being constrained to a narrower container.
Solutions Provided:
Two working CSS approaches were offered:
-
Targeted section fix - Add CSS targeting the specific section class (
.section-template--24614564004172__related-products-padding) withwidth: 100%andmax-width: 100%for screens 750px and wider. This can be added to the theme’s CSS file or the section’s Custom CSS container. -
Global page-width adjustment - Modify the
.page-widthclass inbase.cssby settingpadding: 0pxfor screens 750px and wider.
Resolution:
Both solutions successfully resolved the issue, with the original poster confirming the problem was solved. Screenshots were provided showing the before/after results and implementation steps.
hey @NikosBat , i hope you are doing great.
you can achieve full width by just adding this code in → Css file or go to this section and paste this code in Custom Css container which you will see after scroll the section info down.
@media screen and (min-width: 750px) {
.section-template–24614564004172__related-products-padding {
width: 100% !important;
max-width: 100% !important;
}
1 Like
Hello @NikosBat
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.
@media screen and (min-width: 750px) {
.page-width {
padding: 0px;
}
}
result
Thanks
1 Like
Hello Shinerds, thank you very much that has solved my problem!
Hello Rahul_dhiman, thank you very much that has solved my problem!
Happy to help you…!!!
1 Like