-
Posts
-
Dear Support Team,
For the website elianafe.de we have an image slider at the top as an entry element.
I have created a separate version for the tablet, which is optimised for tablets.
Here is the link to the test page: https://elianafe.de/home-support/On the tablet landscape, the image section now appears optimal.
However, on the desktop PC, the cheaper version with the portrait image is displayed 2x below each other, which is of course not the way it should be (only the upper slider should appear).For the display of an own tablet version (iPad cross) I proceeded as follows:
In the backend I placed 3 versions of the slider for the page: (see test page https://elianafe.de/home-support/)
1. slider for the desktop PC with the ID #desktop-header
2. slider for the tablet landscape with the ID #tabletquer-header
3. slider for the mobile phone with the ID #mobile-headerI then inserted the following script in the CSS to show / hide the respective image sliders:
/*HEADER Optimierung für Desktop*/
@media only screen and (max-width: 1225px) {
#top.page-id-9907 #desktop-header { display:inline !important; }
#top.page-id-9907 #tabletquer-header { display:none !important; }
#top.page-id-9907 #mobile-header { display:none !important; }
}/*HEADER Optimierung für Tablet Quer*/
@media only screen and (min-width: 990px) and (max-width: 1224px) {
#top.page-id-9907 #desktop-header { display:none !important; }
#top.page-id-9907 #tabletquer-header { display:inline !important; }
#top.page-id-9907 #mobile-header { display:none !important; }
}As I said, the image slider now appears on the desktop PC 2 x below each other. What can I do so that only the DESKTOP version is displayed here? #desktop-header ?
Many thanks for your support
Many greetings, Diana
Hey Diana,
Thank you for the inquiry.
For the display of an own tablet version (iPad cross) I proceeded as follows:
Have you tried using the default Advanced > Responsive > Element Visibility settings instead of using custom css modifications to control the visibility of the elements? The visibility options should allow you to toggle the display of the element based on the screen size.
Best regards,
IsmaelHi Ismael,
Yes sure, I first tried to set this via the default settings Advanced > Responsive > Element Visibility. The only problem is that the settings for the tablet landscape format (between 768px and 989px – e.g. tablet landscape format) do not work for the iPad in landscape format and the desktop version is still displayed here.
That’s why I added the additional CSS.
As I said, it is now also displayed correctly on the i-pad in landscape format for the test page https://elianafe.de/home-support/: but in order for it to be displayed, I also have to deactivate the option “Hide on large screens (wider than 990px – e.g.: desktop)” for the second image slider with the ID #tabletquer-header in the standard settings Advanced > Responsive > Element visibility.And so it now works on the ipad-tablet landscape format, but not on the desktop PC: because here the image slider is now displayed 2x below each other, although I have defined in the CSS that the image slider with the ID #tabletquer-header should be hidden:
#top.page-id-9907 #tabletquer-header { display:none !important; }Could you please help me so that it works correctly again on the desktop PC?
Best regards, DianaHi,
And so it now works on the ipad-tablet landscape format, but not on the desktop PC:
Based on the css code above, you have set the #tabletquer-header slider to not be visible when the screen width is less than 1225px. Please note that most desktops or PCs have wider screens, standard is 1920x1080px. What is the default screen resolution of your desktop?
Try adding this css media query to hide the #tabletquer-header slider on screens wider than 1225px.
@media only screen and (min-width: 1225px) { #top.page-id-9907 #tabletquer-header { display:none !important; } }Best regards,
Ismael
- You must be logged in to reply to this topic.