Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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!
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!
@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.
<style><!--
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px 10px 5px 10px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
--></style>
I just checked your page. It looks fine and the images are in full width.
@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.
Please check the following screenshot Before and After my code.
Before ( without my code )
After ( with my code )
Let me know if this is wrong.
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!
@dmwwebartisan it remains the same. Maybe you're viewing on a smaller screen than mine and thats why it looks larger to you.
Dear @jacauschi23
/* 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.
This is an accepted solution.
RESOLVED
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024