pique theme specific panel change grid from 3 to 2

  • Author
    Posts
  • #3188160

    Hello
    I have tried to use all the css on the forums without success.
    Please could you give me css to change panel 4 from a 3, to a 2 centred child page grid so the two images are centred on the panel.

    Many thanks

    The blog I need help with is hairsarahjayne.com.

    #3188635

    dkmyta
    Staff

    Hi there,

    I was hopeful that this would be settings option for the theme but unfortunately it looks as though there isn’t an option for altering the grid setup to 2 and that this is the default setup.

    I believe we should be able to achieve this styling with the use of CSS but it is rather complex and I am hesitant to offer these changes as they may effect other areas of the site negatively (as I cannot accurately test it across multiple pages or responsive views).

    After some investigation and testing I believe the following accomplish this look:

    
    /*Adjust grid arrangement in Panel 4 & 5 from 3 to 2*/
    @media (min-width: 769px) {
    .pique-grid-three article:nth-of-type(1), .pique-grid-three article:nth-of-type(3n+1) {
        clear: none;
        margin-right: 0;
    }
    }
    
    @media (min-width: 769px) {
    .pique-grid-three article:nth-of-type(3n) {
        margin-left: 0;
    }
    }
    
    @media (min-width: 769px) {
    .pique-grid-three article {
        width: 50%;
    }
    }

    I have adjusted media query to begin just after the designated Ipad screen width of 768px as when using this original width the arrangement became distorted. Also, because Panel 5 uses the same structure as Panel 4 the code targeted this section as well, please let me know if this is an unwanted effect and we may be able to adjust the code to exclude it.

    Please test this out for yourself and get back to me if you run into any issues

    Hoping the helps!

    Cheers

The topic ‘pique theme specific panel change grid from 3 to 2’ is closed to new replies.