How can I narrow page margins in the Flow theme?

Technical Q&A
1

Hi,

I have done page (/pages) to the Flow -theme. The page margin is too wide, so I tried to make e.g 100px margins to both sides.

How this can be done?

BR,

  • KJ
2

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

3

Hi @ZestardTech

URL: https://dr-repel.myshopify.com/pages/kayttoohjeet

Password: vaulaw

4

Hi @Kjankko-US !

Here’s a CSS ruleset that should do what you are looking for:

#shopify-section-template--page {
  margin: 0 5vw;
}

You can apply this to your store’s theme using the code editor in the Shopify admin (Online Store > Themes > Actions > Edit code). Once in the code editor, find custom.css inside the Assets folder. Copy/paste the ruleset into a new line in the file, and make sure to save your changes.

Hopefully this helps!

5

Hi, @Kyle_W

If I want to add bigger margins than that, what should I add to this code?

6

Hi @Kyle_W

Also, I wan’t that in mobile view the margins are original. So I need e.g:

  • margin-left: 100px; (desktop)
  • margin-right: 100px; (desktop)

AND

@media only screen and (max-width: 767px)

  • Original margins
7

Hey @Kjankko-US !

The ruleset I provided uses vh, which is a viewport-based unit. A value of 5vw is equal to 5% of the viewport width. Since the viewport width will vary based on the device being used, I’d suggest using a viewport-based unit instead of a static pixel value. If you want to increase the size of the left and right margin you can simply increase the value of the unit. For example, the following would set the margins to be 10% of the viewport width:

#shopify-section-template--page {
  margin: 0 10vw;
}

If you prefer to use a static pixel value instead, then you can use something like this:

#shopify-section-template--page {
  margin: 0 100px;
}

If you only want this change to show on desktop, then you can add a media query to the ruleset so that it only applies on screens larger than your theme’s mobile breakpoint, like so:

@media only screen and (min-width: 768px) {
  #shopify-section-template--page {
    margin: 0 10vw;
  }
}
1 Like
8

Hi @Kyle_W

Thank you for the great instructions!

1 Like
9

I brought the same theme, and the page is really wide! and nobody can solved this problem from the eight company…