Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 18, 2020 at 6:53 pm #1238848
    sensiblekaren

    Hello, love the icon grid with copy on flip. Works fine on most devices but brreaks on a smaller laptop screen where the lines that were 3 columns in 2 rows… go into 3 row with 3 icons on the top row, 1 on the second row to the right and 2 on the bottom row to the left leaving several blank spaces. How can I fix this please?

    Link to the page below.

    Many thanks

    August 20, 2020 at 5:06 am #1239386
    Rikard

    Hey sensiblekaren,

    I can’t see anything like that on my end using Chrome, could you post a screenshot highlighting the problem please? Also please let us know which browser you are using.

    Best regards,
    Rikard

    August 20, 2020 at 1:49 pm #1239542
    sensiblekaren

    Hi Rikard

    Thanks so much for getting back to me.

    It does not seem to matter which browser you use the issue appears – I can see on Firefox and Microsoft Edge.

    I have enclosed a screenshot of what happens at the breaking point in both these browsers.

    It only happens for a few pixels before they align into two columns as the screen size gets smaller.

    August 21, 2020 at 7:22 am #1239744
    Rikard

    Hi,

    Thanks for the update. So does this only happen if you resize the browser, or on actual small devices as well? If it’s the first scenario then the chances of an actual user seeing that are very small.

    Best regards,
    Rikard

    August 22, 2020 at 8:32 pm #1239987
    sensiblekaren

    Hi Rikard,

    My colleague who I am working on the website with actually has the issue ad sees it all the time – so out of 3 people who have seen the site in development – 1 out of 3 can see this issue.. She is using Chrome and her screen is 1280 x 578px

    Any help much appreciated.Thank you

    August 24, 2020 at 6:30 am #1240266
    Rikard

    Hi,

    Thanks for the update. I set my browser width and height to those measurements, but I still can’t see any problems. Please see private for screenshot. Could you let us know exactly how we can reproduce this problem please?

    Best regards,
    Rikard

    August 25, 2020 at 5:00 pm #1240704
    sensiblekaren

    Please see a couple of screenshots of what is being seen on my colleagues laptop. Look forward to your reply. Kind regards,

    August 27, 2020 at 12:37 pm #1241186
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
@media only screen and (max-width: 1310px) and (min-width: 1200px) {
#avia-icongrid-5f478bc40353c li:nth-child(4) {
    clear: left;
}}

    Best regards,
    Yigit

    September 10, 2020 at 12:53 pm #1244891
    sensiblekaren

    Thank you works great.

    September 10, 2020 at 1:09 pm #1244898
    Yigit

    Hi,

    You are welcome!
    Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Icon grid with flip’ is closed to new replies.