Two different sections side by side

Solved
Highlighted
New Member
6 0 0

I'm currently working on something in the Minimal theme, and I was hoping I could get a few sections to sit side by side. For example, getting a rich text or collection list section to sit on the left of a featured product. I'm fairly new to working with Shopify and I was hoping someone could explain the logic behind manipulating the code for sections.

0 Likes
Highlighted

Basically you can approach this two ways.

1) add the two sections (currently showing below on another) then manipulate the CSS to make each section 50% wide and next to one another.

2) better, make a custom section in the code area that does what you want

Keep in mind that on mobile they'll probably look better under one another anyway since the mobile screen is so narrow ( down to 280-320px wide), and 60% up to 90% of web customers are using mobile anyway, (depending on your niche).

Thats the big picture. Whats your store URL and two sections you want side-by-side and I'll have a look for you

Dan 'the web man' | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email: See https://dans-development-store.myshopify.com
1 Like
Highlighted
New Member
6 0 0

https://orange-monkey-waterloo.myshopify.com/

I have 2 featured products now at 50% width 

in theme.scss i just have 

.product-single__hero {
  width: 50%;

}
0 Likes
Highlighted

Yes, that CSS will work on some themes, how does it look on a narrow mobile phone that is 280-320px wide?

Maybe wrap that 50% css in a @media (min-width) rule so on mobile it is 1 wide, like

@media screen and (min-width: 500px) { 
      .product-single__hero { width: 49%; }
}

And make it 49% not 50% just so you have the slightest room as a buffer. Nothing worse than taking the absolute maximum room available and then it overflows into the next row anyway. Adjust the 560 to a number where you want it to change from 2 wide back to default (mobile 1 wide )

Hope that helps everyone.

Dan 'the web man' | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email: See https://dans-development-store.myshopify.com
0 Likes
Highlighted
New Member
6 0 0

They're stacked in both views. I Think thats the part I'm having the most problems with. I've tried a few things to no avail, theres nowhere I can see the homepage in HMTL can i? the index file just shows one line.

 Capture1.PNG

0 Likes
Highlighted
New Member
6 0 0

This worked great, I'm still having trouble figuring out how to stack/just make 2 columns for the whole page. Any hints on that?

0 Likes
Highlighted

Whats the store password so I can see

https://orange-monkey-waterloo.myshopify.com/

online store >>> preferences  >> password

 

Dan 'the web man' | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email: See https://dans-development-store.myshopify.com
0 Likes
Highlighted
New Member
6 0 0

chagaw

0 Likes
Highlighted

This is an accepted solution.

ok trjwaugh,

In your specific case on this exact theme and store, use this code and REMOVE the previous code ( the one above )

@media screen and (min-width: 400px) {
.template-index #shopify-section-1594229156222, .template-index #shopify-section-featured-product {
width: 49%;
display: inline-block;
float: left;
padding: 0 10px; }
}

 

Play with the 400 number to when it kicks in and back to single mobile view. Adjust the padding 10px  up and down for the gap between the two products.

This code refers to specific sections of your store. In customiser if you remove or change the section = code will need to change

If you add more 'featured product' sections - code will need to change.

This really will only work for your store. But other people can read and understand how to reference to apply to their store / sections individually.  

The featured album ( Phoebe & Neil ) can be changed in the customiser without any problems to what it looks like, no problem.

Move / drag these two sections up / down the page in the customiser no problem.

Looks like on mobile / desktop;

moborng.jpg

 

deskorng.jpg

 

Dan 'the web man' | Shopify Partner
If this was helpful then please Like and let me know!
If this answered your question click Accept as Solution
Want to modify or make custom changes on your store? I'm available for hire!
Secure Email: See https://dans-development-store.myshopify.com
0 Likes
Highlighted
New Member
6 0 0

Thanks man!

To better learn from this, what does the class #shopify-section-1594229156222 correlate to?

 

0 Likes