Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • June 9, 2019 at 12:52 pm #1108578
    richardwilding

    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

    June 9, 2019 at 5:05 pm #1108625
    Victoria

    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

    June 13, 2019 at 9:46 pm #1110122
    richardwilding

    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

    June 14, 2019 at 7:07 am #1110217
    Rikard

    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

    June 14, 2019 at 1:06 pm #1110307
    richardwilding

    Sorry Rikard, here is the updated url

    June 14, 2019 at 1:21 pm #1110308
    Yigit

    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

    June 14, 2019 at 1:45 pm #1110320
    richardwilding

    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

    June 14, 2019 at 3:23 pm #1110346
    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:

    
.responsive #top #wrap_all .av-flex-cells .no_margin.heritage-of-the-euphrates-en_sort {
    padding-right: 0!important;
    padding-left: 0!important;
}

    Best regards,
    Yigit

    June 14, 2019 at 4:10 pm #1110365
    richardwilding

    Great, thanks

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

    Thank you

    June 15, 2019 at 3:01 pm #1110667
    Victoria

    Hi richardwilding,

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

    Best regards,
    Victoria

    June 16, 2019 at 3:35 pm #1110798
    richardwilding

    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; */
    }

    June 17, 2019 at 5:00 am #1110903
    Rikard

    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

    June 17, 2019 at 6:42 pm #1111114
    richardwilding

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

    Best wishes, Richard

    June 17, 2019 at 10:31 pm #1111160
    Jordan Shannon

    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

    June 18, 2019 at 6:38 pm #1111398
    richardwilding

    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.

    June 20, 2019 at 5:13 pm #1111998
    Victoria

    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

    July 2, 2019 at 12:35 am #1114980
    richardwilding

    Thanks Victoria

    This works, thank you

    July 2, 2019 at 9:44 am #1115109
    Rikard

    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

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