What's your biggest current challenge? Have your say in Community Polls along the right column.

How to create a full-width page using the Brooklyn theme?

Solved

How to create a full-width page using the Brooklyn theme?

diamondlover123
Shopify Partner
1 0 0

URL of page: https://handmediamonds.com/pages/rings

 

Problem: Trying to make this specific page full-width (i.e., 100%). I am using the Brooklyn theme.

 

My progress: I have tried the following code in timber.scss.liquid, theme.scss.liquid, and as a special page.liquid template that I made for this URL - none of the above worked alone or in conjunction with each other:

 

 

{% if page.url == '/pages/rings' %}
.wrapper {
  max-width: 100%!important;
  margin: 0!important;
  padding: 0!important;

  @include at-query ($min, $postSmall) {
    padding: 0!important;
  }
}
{% endif %}

 

 

I have also tried this:

 

{% if page.url == '/pages/rings' %}
.wrapper {
  max-width: 100%!important;
  margin: 0!important;
  padding: 0!important;
}
{% endif %}

 

 

... and this:

 

.wrapper {
  max-width: 100%!important;
  margin: 0!important;
  padding: 0!important;
}

 

 

I've also tried at least a dozen other variations from other threads, all of which did not work.

 

Others things I've tried:

  • Inserting code at bottom of file(s).
  • Inserting code at top of the file(s).
  • Using <style></style> to enclose the code when working in the page.liquid file.
  • Inspect element of the affected page which indicates the padding is coming from timber.scss.css
  • ... and a variety of other things.

 

Tried solutions from members including @OTM@Ahsan_ANC, and others.

Accepted Solution (1)

Ahsan_ANC
Shopify Partner
1409 254 325

This is an accepted solution.

Hi, @diamondlover123  thanks for trying some basic solutions. 

 

I have just checked your page. it is already full-width.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Replies 23 (23)

Ahsan_ANC
Shopify Partner
1409 254 325

This is an accepted solution.

Hi, @diamondlover123  thanks for trying some basic solutions. 

 

I have just checked your page. it is already full-width.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

lupicoffee
Tourist
15 0 1

Hi there, what ended up working for you? I'm faced with the same issue at the moment (also using Brooklyn theme). 

 

Would appreciate your input!!

Ahsan_ANC
Shopify Partner
1409 254 325

please share that page link.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

Found this solution in another thread:

 

.wrapper { max-width: 100%; }

 

The content is already wider, but still not at full width (see screenshot) 

 

Screenshot 2022-10-12 at 10.44.49.png

 

 

Ahsan_ANC
Shopify Partner
1409 254 325


You can try this code


1. Go to Online Store-> Theme->Edit code
2. Asset-> timber.scss.css ->paste the below code at the bottom of the file.

 

@media screen and (min-width: 591px){
.grid__item {
    padding-left: 0;
}
.wrapper {
    padding: 0;
}}
@media only screen and (min-width: 769px){
.push--large--one-twelfth {
    left: 0;
}
.large--five-sixths {
    width: 100%;
}
.large--four-fifths {
    width: 100%;
}
.push--large--one-tenth {
    left: 0;
}
.rte--indented-images img:not([style]), .rte--indented-images img[style="float: none;"]{
min-width: 100%;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

Thanks! It looks better now, but it's still not at full width: 

 

https://www.lupicoffee.com/pages/notre-cafe

 

Also, the margin is larger on the right, so that the content images are no longer centered. Do you know how to fix this? 

Ahsan_ANC
Shopify Partner
1409 254 325

try this

 

 

#notre-cafe .wrapper{
width:100% !important;
margin:0 !important;

}
#notre-cafe .grid__item{
  float:none !important;
}
.grid,.rte--indented-images img:not([style]), .rte--indented-images img[style="float: none;"]{
margin:0 !important;
}
 

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

That didn't work either. The text is now at the standard width (so far from being full width) and the bottom navigation menu is now suddenly left bound.

 

Screenshot 2022-10-12 at 18.00.18.pngScreenshot 2022-10-12 at 18.00.24.png

lupicoffee
Tourist
15 0 1

Also, this new code snipped only applies to one sub-page, whereas the change should apply to all pages (except the home page). 

 

Thoughts? 

Ahsan_ANC
Shopify Partner
1409 254 325

one solution is you can add me to your store so I can make changes and test them or remove all the changes previously done and let me generate new code for you.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

That works! I suppose you send me a request to access our store, and I'll approve? (this is my first time working with a shopify partner) 

Ahsan_ANC
Shopify Partner
1409 254 325

I just send the request with name Easy Knowledge

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

It's accepted! Thanks in advance. 

 

FYI I have removed all the code snippets that I had played with in the past days. 

Ahsan_ANC
Shopify Partner
1409 254 325

Hi, @lupicoffee  completed.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

Great job, thanks a lot! 

 

Can you share the solution here so that other's can implement it too if needed? 

 

Thanks again

Ahsan_ANC
Shopify Partner
1409 254 325

Unfortunately, it will not work for other users the same way. Also, I am available here if some one else needs this for their store.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

Understood, thanks again for your help! 

lupicoffee
Tourist
15 0 1

Hi again, 

 

I uploaded the new content and now the image size is too large, so it larger than 100% now, and you have to scroll to the right to see the full image. Check out this page in desktop view (it's the only one with the new content so far): 

 

https://www.lupicoffee.com/pages/notre-cafe

 

Is there a way to adjust the width to 100% again? (as opposed to 120% or whatever at the moment)

 

The reason why this is happening is probably because the image size is slightly larger than what I had before to have higher image quality (the previous size looked pixelated at full width). 

 

looking forward to hearing from you!

 

Ahsan_ANC
Shopify Partner
1409 254 325

Hi @lupicoffee  solved that. It was because the max-width was set to 120% in the CSS file.

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

Yes it's perfect now, thanks! 

 

I noticed though that the Products page is very strange now, suddenly products are not displayed side-by-side, but vertically. Is there a way to change this? 

 

Also, the Contact page is at 100% width, which is not super dramatic but it doesn't look very clean. Is there a way to set it to a more appropriate width, say 75%? 

 

 

 

 

Ahsan_ANC
Shopify Partner
1409 254 325

Hi, @lupicoffee I have changed settings again now for a page you want full width. Go to that page edition and from the sidebar select "full-width" as the page template.

 

all other pages are now normal

 

Screenshot 2022-10-17 181108.png

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lupicoffee
Tourist
15 0 1

That's great @Ahsan_ANC , now I can switch between settings myself. Amazing, you have been a great help!