Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1108578

    Dear Kriesi,

    I have a portfolio grid set to three columns, but for some reason it is not filling the full width of the page.

    When viewed in a large browser window a gap of around 1/3 page is always left to the right of the grid,
    and when I go down to a smaller tablet sized window the single column also displays large margins on both left and right.

    How can I get these to fit the same width as the logo/menu above?

    Thanks

    #1108625

    Hey Richard,

    The site looks good on my end. You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Victoria

    #1110122

    Thanks, I’ve fixed the cache for the three column portfolio grid layout, but when I reduce the window size and the grid reformats to one column it has very wide margins. I see in the css that there are 18% margins applied to either side of the single column, but I don’t know how to remove these.

    Thank you

    #1110217

    Hi,

    Thanks for the update, though I get a 404 error on the page you posted. Could you post the correct URL please?

    Best regards,
    Rikard

    #1110307

    Sorry Rikard, here is the updated url

    #1110308

    Hey,

    I checked your page on 1920x1200px screen and layout is fine on my end. Attached a screenshot in private content field below :)

    Best regards,
    Yigit

    #1110320

    Thank you Yigit, the page is fine in a large window. It’s when I make the window smaller that the grid is displayed in one column and the unwanted wide margins either side. How can I lose the 18% margins either side of the one column?

    Thank you

    #1110346

    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:

    
    .responsive #top #wrap_all .av-flex-cells .no_margin. (Purchase code hidden if logged out)  {
        padding-right: 0!important;
        padding-left: 0!important;
    }
    
    

    Best regards,
    Yigit

    #1110365

    Great, thanks

    How do I apply this to portfolio grids on all pages, not just this page?

    Thank you

    #1110667

    Hi richardwilding,

    Can you give us the links to other pages where the margin occurs?

    Best regards,
    Victoria

    #1110798

    This seems to be happening on any page where I have a portfolio grid, when the window size reduces to a small size and the portfolio grid reformats to a single column. I’ve giving another example in the link section below.

    I can see that 8% margins are being added in grids.css, but I’m not sure why and how best to remove them and make the single column fill the same page width as my three column grid.

    @media only screen and (max-width: 767px), all
    grid.css:143.responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    /* padding-left: 8% !important; */
    /* padding-right: 8% !important; */
    }

    #1110903

    Hi,

    Thanks for the update. Please try this CSS to see if you have any luck with it:

    @media only screen and (max-width: 767px) {
    .isotope-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    }

    Best regards,
    Rikard

    #1111114

    Thanks Rikard, I’ve added this to the css but it doesn’t seem to make a difference

    Best wishes, Richard

    #1111160

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, be sure to clear the cache a few times over.

    Best regards,
    Jordan Shannon

    #1111398

    Thanks Jordan,

    Yes, I’ve added the css to the very top of quick css and emptied the cache several times. The wide borders still display on Safari when viewing on small window sizes.

    #1111998

    Hi richardwilding,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
        .responsive #top #wrap_all .av-flex-cells .no_margin {
            padding: 0 20px !important;
        }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1114980

    Thanks Victoria

    This works, thank you

    #1115109

    Hi,

    Great, I’m glad that Victoria could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.