How can I make a 2-column image setup fill the entire page width?

Store Design
1

On the Lookbook page I have images shown in 2 columns. Right now they’re at 50% width because anything more and it puts them all in one single column.

How can I get this 2-column setup to take up the full page container width? Just like how the video on the home page does.

TEST SITE: https://doja-exclusives.myshopify.com/pages/lookbook

PW: aobrew

1 Like
2

@jacauschi23

Please add the following code at the bottom of your assets/theme.css file.

@media screen and (min-width: 1280px){
#lookbook .page-content{ width: 100% important; }
}

Hope this works.

Thanks!

3

@dmwwebartisan unfortunately that didn’t do anything

1 Like
4

@jacauschi23

Please add the following code at the bottom of your assets/theme.css file.

@media screen and (min-width: 1280px){
body#lookbook .page-content { width:100%; }
}

Let me know if this works.

Thanks!

5

@dmwwebartisan still not working. I placed the code into the bottom of assets/theme.css file. and then increased the width past 50% on the content editor of the page but it still makes them all go into just one column. This what I have as the CSS in the content editor of that page, anything past 50% and it puts them in 1 column.
6

@jacauschi23

I just checked your page. It looks fine and the images are in full width.

7

@dmwwebartisan No thats how it has looked the whole time. They’re at 50% width right now because any bigger and they automatically all go into one column instead of staying in two. I need the images to be bigger while retaining the 2 columns.

8

@jacauschi23

Please check the following screenshot Before and After my code.

Before ( without my code )

![before-my-code.jpg|1336x577](upload://A4VthODSngo5DAgNAhvCkq8674B.jpeg)

After ( with my code )

![after-put-my-code.jpg|1297x559](upload://OQ53xoNKnspfsKmLRCyFGB2gl8.jpeg)

Let me know if this is wrong.

9

@dmwwebartisan Yes, that’s how I would like it to look

10

@jacauschi23

So you are saying that after entering the above code at the bottom of theme.css file. The layout is not looking the same?

On my side, it is working. Please remove your history or check with incognito mode. The code should work.

Thanks!

11

Dear @jacauschi23

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:
/* Start */
#lookbook .page-content .rte .row .column {float: inherit !important; width: 100% !important; padding: 0px 0px 15px 0px !important;} 
#lookbook .page-content .rte .row .column img {display: block}
/* End*/
  • Save and check your theme by refreshing it.
12

@dmwwebartisan it remains the same. Maybe you’re viewing on a smaller screen than mine and thats why it looks larger to you.

13

@MS-WEB-DESIGNER that didn’t do anything

14

RESOLVED