home padding and space adjustment on mobile only

Shopify Discussion

Topic summary

Mobile-only layout change requested for the Ella theme: remove side padding and gaps so home-section images touch with no whitespace. Screenshots illustrate current spacing and the desired flush layout from another site.

Solution provided: add custom CSS in the theme’s CSS file (base.css/style.css/theme.css) within a mobile media query (max-width: 749px) to set padding: 0 on .container-full for specific home sections and margin-top: 0 on targeted image blocks. Steps: Online Store > Themes > Edit code > Assets > append the CSS, then save.

An alternative suggestion to insert code in theme.liquid above was shared, but no actual code snippet was provided.

Progress: Initial change removed top margin but not side padding; after adjustments, the side padding was successfully removed. The requester confirmed the fix worked.

Status: Resolved. Images/screenshots were central to understanding the desired outcome.

Summarized with AI on December 15. AI used: gpt-5.
1

Hey I need help adjusting a home section on mobile only, on desktop its perfect, I want to remove the side padding and I want all the pictures to be stuck together like no white space between pictures or on the sides, Im using ella theme. Thank you so much (

IMG_2013.PNG
IMG_2013.PNG1284Ă—2778 457 KB

IMG_2012.PNG
IMG_2012.PNG1284Ă—2778 503 KB

The next picture is from another website, thats how I want it to be.

IMG_2014.PNG
IMG_2014.PNG1284Ă—2778 518 KB

1 Like
2

Hi @abghadban

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.section-block-template--18446778597595__163221535239da03ba .container-full,
.section-block-template--18446778597595__spotlight_block_AF7tMW .container-full {
    padding: 0;
}

div#block-702bd0c5-dea1-41a7-bfa1-ae68809d92ad, div#block-image_Kz4Wy8 {
    margin-top: 0;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hey @abghadban

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

hey thanks for your reply, the margin top worked but the side paddings still the same

5

hey thank you so much this worked!

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.