Responsive design doesn't working properly

Support
#1

Hi!!I’m having a problem with the responsive design.

Cornerstone allows me to select in which devices I want to see a row for example and in which I want to disable them. The thing is I am selecting for example the header of this page:

https://congresoneumopediatria.com/xxxviii-reunion-de-la-sociedad-espanola-de-neumologia-pediatrica/

and I duplicated. Then I selected one of both to be only visible in big screens, in laptops and in big tablets. and the second row I only want to see it in small tablets and in mobiles.

Once I do that, responsive starts to work but not properly. When you go to a browser and you decrease the browser width manually, you will see that in one particular pixel (979px) you can see both rows at the same time. First of all this is not the breakpoint I have selected. It should have been happening around pixel 768 and second, it never have to show you both rows!

So I’m doing it manually with all the rows I need to do that with media queries. And I’m wasting my time.

Can you let me know how to solve that??

Thanks!!

#2

Hi Senp,

Thanks for writing in!

The responsive works fine as expected in the given page.

Theme having certain responsive breakpoints to work properly in most of the device. Beyond those breakpoints, you need custom media query. I couldn’t see the mentioned issue that you are facing on the page.
Please try to test in exact devices instead of decreasing browser size.

If there is an issue in any particular device, let us know we can suggest you a fix.

Thanks

#3

Hi!! I don’t know why you are not seeing it…Here is a video when I do it. I’m using chrome and I just resize the browser manually.

https://www.useloom.com/share/81c2f074960548a2a4ec568cf9dfb450

You can see there also that in back end, when I’m in big tablet mode and in small tablet mode I can see both rows also, and they should never appear together. But this I think is a minorbug, because then in front end doesn’t happen. But it would be great for you to fix that. It happens everywhere.

Thanks!!

#4

Hi @SENP_Congreso,

I can’t reproduce the flickering effect (displayed briefly) on my test, Windows 10 and Chrome browser. As for the builder preview, the range is between 768px to 979px which is the tablet view. May I know the browser width while you’re testing it? The builder device preview is just a simulation based on available width and since the browser is not full-width and there is a visible sidebar (inspector area) then it also narrows the available width even if you choose that device view. May I know the exact browser width so I could test it as well on my installation?

Thanks!

#5

This is so strange…You can see the browser width in the video I have sent you…

Well, I hope it is only happening to me.

#6

Please give us what Operating System and browser you’re using to test. Also give us their version numbers. The page you posted is also not available anymore. Please restore it.

While we wait for the details, please try testing in other browsers and if you have browser extensions, please deactivate them to test if they’re conflicting.

Thanks.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.