Hello! My contact page for desktop leaves lots of white space and I want it to fill the wholescreen like it looks on mobile. How would I get this done? Thank you!
website: edenitl.com
pass: supermans
Topic summary
A user seeks help adjusting their Exhibit theme contact page on desktop, which displays excessive white space unlike the mobile version that fills the screen properly.
Two solutions proposed:
-
Custom JavaScript approach - Add code to theme.liquid file above the
</body>tag to modify the contact page layout -
CSS modification - Insert media query code in the main CSS file (main.css, base.css, style.css, or theme.css) targeting grid columns for screens wider than 990px
Current status: The original poster tested one solution successfully for the contact page, but reported it negatively affected product pages, making them unusable. The issue remains unresolved as the proposed fixes create conflicts with other page layouts.
1 Like
Hey @johndotpark
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @johndotpark
check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media (min-width: 990px) {
.wrapper .lg\:grid-cols-12 {
grid-template-columns: auto;
}
}
And Save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
hello! thank you, this works, but it also then messes with my product pages so I cannot use.