How to make certain pages wider and allow image to the left (desktop view)? - Spotlight Theme

Store Design
1

I have 3 pages (that when viewed on a desktop) have lots of white space to the left and right. I am using the Spotlight theme. How do I make these pages wider and also allow for an image to be on the left with words on the right? Right now I can add an image at the top or bottom.

If I am able to add an image to the left and words to the right, how will that look on a mobile device?

Here is my About Us page where I would like the image at the bottom to the be on the left with the words on the right: https://dalmatiaprinting.com/pages/about-us

Here are two other pages where I would like to make the width larger and add an image to the left:

https://dalmatiaprinting.com/pages/bulk-orders-custom-mugs-1

https://dalmatiaprinting.com/pages/custom-bulk-orders

1 Like
2

Hi @Dalma3

I can only help you with the page width but for the image to change you need use sections. If not you need to hire a developer for that.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 749px){
.page-width--narrow {
    max-width: 100%;
    padding-right: 5rem;
    padding-left: 5rem;
}
}

And Save.

Result:

Made4uoRibe_0-1724787172909.png
Made4uoRibe_0-1724787172909.png1894×710 69.6 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!