Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • January 11, 2023 at 2:33 pm #1378265
    condonpb

    Please goto the peter-test1.co.uk homepage. I have created a grid with 4 columns marked Solar panels etc which is fine showing on desktops. I have then created 2, 2 column grids for my iPad device as I want it to only show two of the columns side by side as this looks more acceptable See screenshot 0. I have marked the 4 columns to have element visibility for only large screens 990px width and hidden the rest see screenshot1. On the two columns side by side, these have the element 990px hidden and the rest visible. See Screenshot 2. However, on the iPad landscape 4 columns are still showing but I only want two to show. Is this because the breakpoint is at 1024 px for landscape on ipads?

    Can you please help I have enclosed screenshots

    • This topic was modified 1 year, 11 months ago by condonpb.
    • This topic was modified 1 year, 11 months ago by condonpb.
    • This topic was modified 1 year, 11 months ago by condonpb.
    January 13, 2023 at 2:50 pm #1378596
    Yigit

    Hey,

    Thanks for contacting us!

    Ipad landscape width seems to be 1080px. I have edited your Grid Row elements and added “desktop-section” ID to your 4 column grid and “mobile-section” ID to your 2 column grids and then added following code to bottom of Quick CSS field in Enfold theme options > General Styling

    
@media only screen and (max-width: 1080px) { 
.responsive #top #wrap_all #mobile-section {
  display: block !important;
}
.responsive #top #wrap_all #desktop-section {
  display: none !important;
}
}

    I do not have an actual Ipad so I could only test it on my browser. Could you please review your website and confirm if it helped? :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.