Hi together,
I’m searching for a way to add 2 sections side by side. Is it possible to program a costume liquid section that allows you to add two (or more) standard sections inside?
For example: I need to have two simple ‘‘Text with overflow’’ sections showing side by side on desktop in full width and stack on mobile.
With a Page builder like PageFly it is possible, but I don’t won’t to have a third party application runs in the background.
I hope there is someone who can help me.
Hello @Dev-Steve
To provide you with the most precise solution in this case, could you please share… link?
Hi GemPages,
Password: sitwao
Please add the following CSS code to your assets/theme.css bottom of the file.
@media screen and (min-width: 741px) {
#shopify-section-template--17116456747288__3dd579ed-74b9-46b0-a583-f7b36dbad951 {
width: 50% !important;
float: left !important;
}
}
Thanks!
Hi Dmwwebartisan,
Thank for your reply and your code.
Now, one of the custom Liquid Sections is split in two rows what is great. But I run into some issues.
The splitted Liquid section looks like this now:
If I add a section to this, it looks like this:
The Problem is now, if I add another section, it appears only above or under this section. Is it possible to have two standard sections side by side?
And how do I add the splitted custom liquid section again?
Thanks for your help!
yes please add a section I will check your site. after sending the correct solution to you.
Thanks!
Ok, I add a Custom Liquid section like the one in my second image and saved it.
Hi, Dmwwebartisan,
Thank you for your help!
With your code, I managed it by my self. I created a copied version of ‘‘Image with text overlay’’ and changed the section.id inside the code.
But, is it possible to have the code inside the copy? So not the specific section is splitted by 50% but every one of the copied ‘‘Image with tex…’’ section?
Thanks for your replay!!
Create a custom ‘Image with text’ section.
I have created a new ‘Image with text overlay’ called ‘MS Image with text overlay’.
It is the last section before the footer…
ok please change the CSS and liquid code .
set section width by 50% using a custom CSS class.
How do I set this up? I can only change the Image-wrapper with to 50% or all containers all over the complete Theme.
I want only to set up the ‘MS Image with text overlay’ Section as 50% with.
Is this possible?
Sorry Im a beginner in Liquid
Please find the following code for your sections/ MS Image with text overlay. Liquid file
Replace to
```markup
2] Please add the following CSS code to your assets/theme.css bottom of the file.
```markup
@media screen and (min-width: 741px) {
.ms-custom {
width: 50%!important;
float: left!important;
}
}
try this solution.
Thanks!
Perfect it works!
Thank you very much, you’re a hero!