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

[Coffee-Exp]

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!

[PeanutButter]

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

[Coffee-Exp]

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

Thank you very much!

[PeanutButter · 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

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

 The remaining code should look like this:

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

[PeanutButter]

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

 

[Coffee-Exp]

Hi @PeanutButter, Sorry that I didn't point out which section is related to my second query.  Actually, it is the same section.

  If I change its background colour, we can find that the height of the photo is not same as that of the section.  In order to indicate this issue clearly, I would like to share below screenshot (posted in my next two messages) for your reference.  Hope that you would have an idea to solve it.  Thank you very much!

[Coffee-Exp]

[Coffee-Exp]

[PeanutButter]

@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:

With real image, image same height as section:

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)?

[Coffee-Exp]

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!