How can I adjust a full-width image with text section in Brooklyn Theme?

Store Design
1

Dear all,

Can someone help with text with an image section in home page.

I need (i) that section to be full width (ii) background to the colour of the text, in that specific section, to be FAF7F3.

I use Brooklyn Theme.

I would appreciate some guidance here.

Thank you so much!

Asta

2

@Queenofgifts

Please share store URL & screenshot what do you want !

Thanks!

3

Thank you for your quick response!

Please see my store URL, let me know if password is needed.

https://box-and-bow-nl.myshopify.com

Below is the section that I would like to get 100% width and the part that I have scribbled on should have a background colour FAF7F3

Screenshot 2021-10-31 at 09.22.58.png
Screenshot 2021-10-31 at 09.22.58.png1028×423 285 KB

4

@Queenofgifts

Please share store front password!

Thanks!

5

@dmwwebartisan

diekla

6

@Queenofgifts

Try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid OR timber.scss.liquid ->paste below code at the bottom of the file.

#shopify-section-1635612357e56831df{background-color: #FAF7F3 !important;}
#shopify-section-1635612357e56831df .wrapper {
    max-width: 100% !important;
    padding: 0 30px;
}

Thanks!

1 Like
7

@dmwwebartisan

Thank you very much. That part worked well - you are great!!!

Just the last one, is there a way to make the image to go until the left edge, as currently there is a little gap between an image and background.

Screenshot 2021-10-31 at 10.02.46.png
Screenshot 2021-10-31 at 10.02.46.png1078×423 266 KB

Thanks again.

Asta

1 Like
8

@Queenofgifts

Remove previous css class and add this new code

#shopify-section-1635612357e56831df{background-color: #FAF7F3 !important;}
#shopify-section-1635612357e56831df .wrapper {
    max-width: 100% !important;
    padding: 0 0px !important;
}
9

Thank you this beautifully worked on the desktop version.

However, on the mobile version the text and the button is not in the centre - is there an easy way to align the text with the button on the mobile version in the centre?

I will also send you a separate email on another matter.

Thank you very much!

Asta

1 Like
10

@Queenofgifts

Try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid OR timber.scss.liquid ->paste below code at the bottom of the file.

@media screen and (max-width: 768px){
#shopify-section-1635612357e56831df .feature-row__text {
    order: 2;
    padding-bottom: 0;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#shopify-section-1635612357e56831df .btn{ margin: 0 auto !important; display: table !important;}
}