When building my site I’ve noticed the text boxes are very narrow and aren’t truly “full width” not sure how can i accomplish this.
Topic summary
A user is experiencing narrow text boxes in their Shopify Dawn theme that aren’t displaying at full width across their site, as shown in an attached screenshot.
Initial Responses:
- Multiple community members requested the store URL and password to investigate the issue.
- One user suggested adding CSS code to modify the
.page-widthclass in the base.css file.
Solution Provided:
After the user shared their store link (https://eex0c0-vr.myshopify.com/) and identified the homepage and services page as examples, a developer provided a working solution:
- Add custom CSS targeting
.spro-containerwithmax-width: 100%!important;to the base.css file. - This code successfully makes content display at full width across the site.
Outcome:
The issue was resolved. The user confirmed the solution works and mentioned they’ll need to adjust product tile sizing on the homepage separately. The discussion is marked as solved.
1 Like
Hi @wmartindale
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Hi, can you share store url?
Hello @wmartindale
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?
Hello @wmartindale ,
Please add the following code into your base.css file and check.
@media(min-width:980px){
.page-width{
max-width:100%! important;
width:fit-content;
}
}
Site Link - https://eex0c0-vr.myshopify.com/
pass - paonta
1 Like
https://eex0c0-vr.myshopify.com/
pass below
Hello @wmartindale
On which page is that section appearing? Can you send the page URL?
1 Like
Its the home page, and technically all the pages don’t see to be full width div’s but here is an example as well
1 Like
Hello @wmartindale
Do you want this?
Yes exactly! Is that something I can implement throughout the site as well?
1 Like
Hello @wmartindale
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
.spro-container {
max-width: 100%!important;
}
1 Like
Thank you @devcoders I will need to figure out making the products tiles smaller on the home page but appreciate helping
1 Like
Hello @wmartindale
You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.
like and accepting the All solution. Thank you!
1 Like