Responsive design doesn't work in all sections

I have some issues with the responsive design. At rede-reim.de it used to work out perfectly for the last years. But now, after some updates, the frontend on mobile devices displayed older sections I removed already in the backend. As I couldn’t solve the problem, I arranged new sections for XS and S devices which I hide for larger monitors. But today I suddenly had problems with the size of the headlines and older sections in another part of my page.

This is quite theoretic as in the frontend everythings should look fine again. But I would love to know why this difference between large and small monitors occured. I mean, in general content should be equal in all sizes.

Do you have an explanation for my problem. I am afraid that it could occur again with a next update and it takes a lot of time to check all pages of the domain https://rede-reim.de/

I am also wondering if its a problem to have more than one h1-headlines, as I duplicated some sections to have a proper design on mobile devices and PCs. Is it rated as duplicated content and does it affect a negative google ranking?
I would appreaciate to have a 1:1 responsive design of my orinal version, without doubled sections …

Hi @Doudoux,

We have visited your website, but unable to recognize the issue you described in your post. Can you please provide any screenshot marked with the issue or any video that helps us to recognize the problem?

Thanks

Hi there,
of course it’s difficult to see without beeing in the backend. Please find here some screenshots. They show what it looks like
a) when I hide the section Referenzen in the two smallest devices
b) when I don’t hide the same section in the smaller devices (Hochzeitsreden is displayed instead of Referenzen. This is a section which I canceled some months ago.)
c) on bigger screens. This is how the section should look like an all devices.

If you can’t imagine I can give you the log-in for the backend if you want to. In the source code of my website you can see at the main page that some content is repeated due to the setting of different monitor sizes …

Hi @Doudoux,

It is very difficult to recognize the issue by seeing the given screenshot, can you please provide login credentials for your staging site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

With pleasure. Please find here all you need for entrance.

Hello @Doudoux,

I have logged in and I found out that the issue is happening because, in one section, you have added two rows. The section is set NOT to display on smaller screens. There are also rows in this section that is set to display for smaller screens and a row for larger screens.
Screen Shot 2020-12-31 at 5.33.35 AM

We highly recommend that you disable first the “Hide During Breakpoints” option for each section.

Make sure to display all rows as well. Once all of the elements are visible, remove or delete any rows that are no longer used for the page. And then go back to each section settings and apply the “Hide During Breakpoints” options again.

Best Regards.

But this is exactly my problem: When I disable Hide during Breakpoints, an older version of the rows which has been deleted long time ago, is suddently shown in the frontend.


Hochzeitsreden has been replaced by Referenzen, Kosten (2 rows) and Redenschreiben (a 3rd row). I sloved the problem by creating another version of the rows for smaller devices, but it’s so strange that the original version does not work for the smaller sizes. And of course, I am afraid of having this problem again without realizing it. Therefore I would be happy to know the reason why.
Happy new year!

Hello @Doudoux,

I have managed to duplicate the page in question and I created a test page. You got this page from a template that uses the classic section, rows, and columns. You will have to enable/disable the “Hide During Breakpoints” option in those elements so that each element’s settings will be updated. At the moment, I have made sure that everything will display in all screen sizes so that you can see all sections, rows, and columns. If you need to hide a particular section or row for specific screen size, you can then apply the “Hide During Breakpoints” option later on.

Best Regards.

Thanks for the test-page. I tried to get everything in order, disabled hide during breakpoints and managed to find and to delete the older rows.

But now the situtation in the real page is as follows:
The three sections feature image left, feature image right and copy of feature image left are enabled at all sizes of devices. But in the two smallest screens the appear just as blank surfaces.

I hope you still have spledid ideas :wink:

By enabling and disabling “Hide During Breakpoint”, my layout of the main page changed: Now typography of the 2nd paragraph is smaller than the others and I can’t change the size.


Any ideas? seems to be a never ending story …

Hello @Doudoux,

Is this page came from the demo site or template and you have just edited to insert your contents? If that is the case, the font sizing is because of the responsive text applied to the headlines and text elements on the page. This template is also using the classic section, rows, and columns which is why there are two rows in a section that display elements differently on specific screen sizes.

To prevent any further delays and complexities, I highly recommend that you recreate the site using the latest section, rows, and columns. With the help of the Column Layout option in the row settings, you can always change the layouts of the columns in different screen sizes without the need to duplicate your rows or sections. Please check out these video tutorials here to learn more about what I am referring to.

Hope this helps.

Sorry for the delay …
I will try to rebuild my pages with the new elements. Strange thing is, that the same old elements are displayed differently in the same screen size at the moment.
But there is still the problem, that whole sections aren’t displayed even if the are enabled for all screen sizes, see also my remark above:

I worked mainly on the real page, not on the test-page, to remove this problem. But also at the test page some items have vanished in the frontend when I deleted another element in the backend. This is why the test page looks different now. At the moment I helped myself by hiding some superfluous elements on the real page.

Hello @Doudoux,

Are you editing the same page? If that is the case, we highly recommend that you temporarily deactivate WP Rocket plugin. Save your changes and test the page in private browsing mode or incognito mode. You may be seeing the old content cache of the page even if you already removed some of the sections or rows.

Kindly let us know how it goes.

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