Need help adjusting left/right padding for a Page

Store Design
,
1

Hi all, this is Brian from Carbyne Fitness based in Singapore. I have created an exercise planning tool and embedded it in one of my Pages in Shopify (Dawn Theme). https://carbyne.sg/pages/exercise-planner is my page.

page.jpg
page.jpg1897×826 114 KB

My Excel width is fixed at 1200 x 850 pixels because I don’t want my users to scroll through it.

I have 3 questions:

  1. How do I remember the white space (shaded in black)?

  2. Alternatively, I would like to control the amount of space that I drew in red.

  3. Finally, if I were to centralize the entire section (including my title Exercise Planner), how do I go about doing it?

I am asking 3 questions because I have not yet finalized how I want the page to look, also I would like to see how it would look on a smaller laptop screen as well as on mobile before I make a decision.

Hope to get your help on this!

2

@CarbyneFitness - please add this css to the very end of your base.css file and check

iframe{max-width: 100%;}

@media screen and (min-width: 990px){
section#shopify-section-template--16201153904792__main .page-width{width:100%; max-width:100%;}
}
3

Your trying to both position and control the size and centering of an iframe, an iframe trying to be larger than a standard 960 or 768 to fit as many screens as possible

Your gonna have a bad time because iframes are obnoxious for this.

ttps://www.google.com/search?q=centering+iframes

Generally solved for sanity with javascript for responsive iframes.

You can try and use a custom css setting on that pages section for that iframe

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Crudely, untested

.page-width { margin: auto 10vw; }
/* push iframe from the left */
iframe { margin-left: 10px; }

Combined with setting the iframe width to 960

Good Luck.

4

Hi, @CarbyneFitness .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

section#shopify-section-template--16201153904792__main .page-width {
    max-width: 100% !important;
    margin: 0px auto;
    display: table;
}

section#shopify-section-template--16201153904792__main h1 {
    text-align: center;
}

Result:

websensepro_0-1704267447998.png
websensepro_0-1704267447998.png1364×608 52.1 KB

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

5

Thanks everyone for the solutions. I have tested all 3 solutions and PaulNewton’s solution worked the best for what I need at the moment (reducing left gap without the text/table touching the left edge of my screen, able to see the title “Exercise Planner” on both PC and mobile).

I have marked this as resolved!