Reducing width of Brooklyn theme sections

Solved
MyMien
Excursionist
17 0 7

Hi All,

on my home page (www.mymien.ca), I currently have some dynamic sections (two slide shows, newsletter signup, map) that take up 100% width on the screen. Is there a way to add padding/margins to the sections so they are 80% width of the page, or alternately a way to apply a consistent margin/padding globally to the entire home page?

 

Thank you!

Melisa Velic
MyMien 

KetanKumar
Shopify Partner
14259 1659 5139

@MyMien 

Thanks for it 

do you like the box-sizing layout? also, give a section screenshot.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

Hi @MyMien as you say, there are full-width sections and other which are not full-width.

If you want some full-width section to have the same width as the non-full width sections, you could use the wrapper class

Screen Shot 2021-01-16 at 17.40.16.png

This wrapper class makes the sections width to a max of 80% the window's width.
To use this class in a section which currently does not use it, you have to open the section's file and add a <div class="wrapper"> at the beginning of the html and a closing </div> at the end
For example, for the slideshow section, you would have to open Sections/slideshow.liquid and around line 32 add the <div class="wrapper">. The result would be something like this:

Screen Shot 2021-01-16 at 17.49.29.png

 

Then add the closing </div> on line 198 . Result would be like this:

Screen Shot 2021-01-16 at 17.50.45.png

I am not sure that the slideshow will look good at 80% though.  The map and newsletter probably will look fine

If you want to make the slideshow have different margins let me know and I will right another solution

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
MyMien
Excursionist
17 0 7

thanks @PeanutButter ! I was able to use the wrapper class to shrink the width to 80%. Is there a way to have the wrapper class applied to the sections conditional only on desktop browsers (so it still shows the sections at 100% width when viewed on mobile)?

 

Thanks,

Melisa

0 Likes
PeanutButter
Shopify Partner
330 66 137

Will send you solution for that tomorrow

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
MyMien
Excursionist
17 0 7

Hello @PeanutButter, any luck with the solution? Appreciate your help with this!

Thanks again!

0 Likes
PeanutButter
Shopify Partner
330 66 137

Sorry, had a busy day. I will send solution in a few hours

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
PeanutButter
Shopify Partner
330 66 137

You will have to create a custom wrapper class.  As it will only apply to large screens, we will name the class wrapper--large.  Lets start:

1- Depending on your theme, you will have one of this files inside the Assets folder theme.css.liquid, theme.css or theme.scss.liquid. 
Open the one you find and at the end of the file paste the following:

@_media screen and (min-width: 992px) {
    .wrapper—-large {
        
        max-width: 80%;
        margin: 0 auto;
        padding: 0 30px;
    }
}

The 992px value is the screen size from where a max-width of 80% will be applied.  You can tweak this value to your liking.

2- Now, go to the file we previously edited Sections/slideshow.liquid and on line 32, where we added the wrapper and change

this:

<div class="wrapper">

to:

<div class="wrapper--large">

 

Now you should have a 100% width for your slideshow in small screens and 80% max-width for screens above 992px.

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
MyMien
Excursionist
17 0 7

Thanks @PeanutButter , however when I add the code from step one to the bottom of my theme.scss.liquid file, it messes up the formatting of sections on the site.  Any thoughts?

 

site2.jpg

_____________________________________________________________________________________________________________________________________________________________

site.jpg

 

 

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi @MyMien I think in your screenshot I appreciate a long hyphen (—) and a normal hyphen (-) between the wrapper and large words. Should be 2 normal hyphens like this:

wrapper--large

not like this:

wrapper—-large

I think that might be the issue.  If not, I have requested collaborator access to your site to take a look.

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es