Fragment Columns change depending on viewpoint?

[Buzby]

I am working on a website (sorry no link at the moment) that I am having trouble displaying nicely on both Mobile and Desktop.

The problem is I have a page of fragments set as 2 columns, carousel on left one and text on right one which looks great on Desktop, however looks awful on Mobile.

If I change to 1 column then this looks great on mobile, but awful on desktop.

What I would like to do is have the fragment layouts in 2 columns on desktop and perhaps tablets, but on mobiles reduce this to 1 column.

Any ideas if this is possible?

[graphicz]

Right at the bottom of the stylesheet:

@media (max-width:800px) {
.content-area .fragment-list .fullWidthSection {
width: 100%;
flex: 100%;
}
}

If you just want on the home page try something like this in Responsive Brochure fragment list: In the inside bit, do all three

<div class="fullWidthSection <actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e"> buzbyfrag</actinic:block>">

and then

@media (max-width:800px) {
.content-area .fragment-list .fullWidthSection.buzbyfrag {
width: 100%;
flex: 100%;
}
}

[Buzby]

Hi Jonathan,

Many thanks for that, but I'm afraid it didn't work. I still had 2 columns on mobile view.

[graphicz]

Working here:

https://www.webeg.net/v18/

[graphicz]

You could use one of the bootstrap standard selectors if you wanted te break at a larger screen size:
@media(max-width:991px){} @media(max-width:1199px){}

[Buzby]

Many thanks Jonathan, good to see it working.

I am doing this on a normal page full of fragments so a little different to the home page.

I will give it another go later.

Many thanks.

[graphicz]

Another trick is to have two fragment lists, one coded to do what you want then a true/false variable to tell each fragment which list to go in.

[graphicz]

You may get some empty product details boxes. use this to remove them:

Only works on uploaded site - NOT ON PREVIEW - Warn Client.

.product-details:empty {
  display: none!Important;
  width:0;
  margin:0;
  padding:0;
  border:0;
}

<script>
$("div.product-details").filter(function(){   
    return $(this).text().trim() == ""
}).remove();
</script>

[Buzby]

Many thanks Jonathan, although I still can't get it to work.

I am using the carousel in fragments, I wonder if this is the issue.

Here is a link

[graphicz]

The example uses the carousel in the first fragment. Inspect element and ensure you are doing what I am.