Brooklyn Theme - Remove the left and right margins of the section "Image with text"

Solved
Coffee-Exp
Excursionist
27 0 9

Hey there,

I'm a newbie in Shopify and wanna know how to remove the left and right margins (as shown in the below screenshot) of the section "Image with text" when applying Brooklyn as the theme.

Also, I find that the height of the product photo is not same as that of the section if the background is set as a colored one.

May anyone have ideas to solve my queries?

Thank you!

Coffee-Exp_0-1610873841906.png

 

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

@Coffee-Exp can you share the URL to your site?

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
Coffee-Exp
Excursionist
27 0 9

Hi @PeanutButter  Here is my URL: https://coffeeexp.com

Thank you very much!

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

For your first request, to remove margins in the Image-with-text section:

  • Open file Sections/featured-row.liquid
  • Remove the following 2 lines:

Remove <div class="wrapper"> at line 1

Screen Shot 2021-01-17 at 10.46.31.png

Remove the closing </div> for that wrapper at line 49:

Screen Shot 2021-01-17 at 10.47.46.png

 The remaining code should look like this:

Screen Shot 2021-01-17 at 10.48.20.png

 

For your second request, which is the section you are talking about?

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
PeanutButter
Shopify Partner
330 66 137

For the second request, is this the section and what you are trying to accomplish?

Screen Shot 2021-01-17 at 11.07.27.png

 

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
Coffee-Exp
Excursionist
27 0 9

Hi @

 

 

 
 

 

0 Likes
Coffee-Exp
Excursionist
27 0 9

Screenshot1.png

0 Likes
Coffee-Exp
Excursionist
27 0 9

Screenshot2.png

0 Likes
PeanutButter
Shopify Partner
330 66 137

@Coffee-Exp please try selecting an image, as I think that does not happen with a real image, only with the placeholder:

With placeholder, same behaviour as you have:

Screen Shot 2021-01-18 at 14.50.14.png

With real image, image same height as section:

Screen Shot 2021-01-18 at 14.49.57.png

 

Let me ask, how are you adding a background color to the section, with custom code? I see no setting in the Image with Text section to modify background color

Also, did you try my proposed solution to the first issue (making Image with text section full width)?

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
Coffee-Exp
Excursionist
27 0 9

Hi @ PeanutButter, Great thanks for your prompt reply.  For my second request, let me try to implement it with real image.

On the other hand, you help me solving the first query so that the left and right margins of the section have already been removed.

Thank you very much!

0 Likes