Changing content based on break-point

Beta
#1

Hi guys,
I asked this question few months back, showing you some example of different images at different break-point to fit the layout better. Apple website has great example of this. And your answer was that this will be implemented on this release.

I cannot replicate this. Yes, I can change the layout on each break-point but content / images look the same and at this point I’m, not sure how I could create similar results.

I think the workaround to this would be creating double, triple or quadrupedal columns and enable them on each breakdown individually but then this will be nightmare to manage?

Desktop View

Mobile View

#2

@rafalkukla, Appel uses two background images, one for Desktop and one for Mobile.

You can easily swap it with Media Queries.

For example if a Background lower image is set in the Section’s element CSS, then this is the Mobile one:

@media screen and (max-width: 767px) {
   $el .x-bg-layer-lower-image {
      background-image:url(new/url/here)!important;
}
}
1 Like
#3

Medium

Small

#4

Hi Misho,

Thanks for that. This is what I’m currently doing with the 2.5 version but I found tricky to manage. Thought this new grid system would be more flexible and would have this ability. Even reduce font size, etc.

So my original question was that it would be great to tweak content, and apply final tuning per each break-point, including adding smaller images, fonts etc. directly from the layout.

#5

Hi @rafalkukla,

Thanks for reaching out about this. And thanks @Misho for chiming in with some helpful CSS. Another idea would be adding multiple image elements and using the visibility controls to hide based on screen size. If you needed more control you could use a Content Area element with custom HTML/CSS.

1 Like
#6

There is no options to control background images / paddings / margins etc during breakpoints. Misho gives you the right answer. It can be done with code.

But there is one old trick to do that:

1 Like
#7

Hi Georgich, Alexander

Ok Thanks for the confirmation and for the video. Tried this method like 10 min ago, which I think I may implement this way on the new grid system.

Does anyone know how the new release would affect existing sites? I’m planning to start on a project and I’m not sure whether I should wait for 2.6 or start on 2.5 and then re-tweak on 2.6

#8

@Georgich, funny. Show/hide of Sections used to load both desktop and the mobile background image, making things worse. But now I have tested this situation with Gtmetrix and the Waterfall isn’t showing the mobile background.

3 Likes
#9

Great, that’s perfect.

#10

@rafalkukla, glad it’s working for you!

In terms of what version to use, if the site isn’t going live just yet you could even start on the 2.6 beta. I’d just recommend waiting for the official release so all the kinks get worked out. The main disadvantage to using the previous release would be not having the new elements (especially the new Row).

1 Like
#11

ok great, make sense. Will do that.

Cheers!

#12

Where is no difference if you use CDN :smirk: With Cloudflare CDN i got very high rate on GTMetrix.

I think it calculates rate for mobile and desktop considering on @media queries. So if you are surffing through mobile device the “display: none” elements just wouldn’t load. It’s my theory ) That is why there is two ratings, one for mobile and other for desktop. It just calulate loading time for elements which are in viewport.