Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #700834

    Hi,

    I have a page, where I showed FP-page social items using blog posts element (green section: 10 social container/1 post), but I changed to the portfolio grid because in this way I can manage better my social items (brown section: 1 social container/1 portfolio item).

    I put the social container code into the portfolio item’s excerpt, and then show only the excerpt in the grid:
    <div style=”text-align: center;” class=”social_container”> <div class=”fb-page” data-href=”https://www.facebook.com/jozsibacsigondolatai/ data-width=”380″ data-hide-cover=”false” data-show-facepile=”false” data-tabs=”” ></div> </div>

    Then I used the next shortcode to adjust the portfolio grid elements to the social container:
    .grid-entry .inner-entry { box-shadow: none;
    }
    .grid-content, .grid-content * {
    background: transparent!important;
    }
    .grid-entry .inner-entry { background: transparent !important;
    }
    .grid-content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    height: 130px;
    }

    These are worked quite well, but the only problem, that the bottom-padding in mobile view is small between the social containers (brown section) compare to the blog element solution (green section). The padding is fine in the desktop browser. I had a similar issue with a mobile view here, but you solved it too: https://kriesi.at/support/topic/margin-disappears-in-mobile-view/

    Could you help to increase the space between the social containers in the grid solution in mobile view?

    Thanks in advance!

    Best regards,
    Robi

    #701393

    I am sending the pictures, too

    #702398

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Andy

    #702430

    Hi,

    I’m sending the information below.

    #703134

    Hi,

    Thank you for the info.

    We added the following css code in the Quick CSS field.

    @media only screen and (max-width: 768px) {
        .responsive #top #wrap_all .grid-sort-container .grid-entry {
            width: 100%;
            margin-bottom: 50px;
        }
    }

    Best regards,
    Ismael

    #703152

    Hi Ismael,

    Thank you for your help, it works almost perfectly. The only problem, that the containers on Ipad in landscape view are still too close to each other:
    https://goo.gl/photos/JYfARdC5GvS7ufKR7
    Could you check it, please?

    Thanks,
    Robi

    #704392

    Hi Robi,

    I have added this code in Quick CSS:

    @media only screen and (max-width: 1024px) {
      .responsive #top #wrap_all .grid-sort-container .grid-entry {
        margin-bottom: 50px;
      }
    }

    This should fix the issue. Let us know if it works on your end also. :)

    Best regards,
    Nikko

    #704426

    Hi,

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

    
    /* iPad Landscape */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
      .responsive #top #wrap_all .grid-sort-container .grid-entry {
            width: 100%;
            margin-bottom: 50px;
        }
    }
    

    Best regards,
    Vinay

    #705503

    Hi Guys,

    thank you for all your help!

    In the end I modified your short codes, the result is this:

    .grid-entry .inner-entry { box-shadow: none;
    }
    .grid-content, .grid-content * {
    background: transparent!important;
    }
    .grid-entry .inner-entry { background: transparent !important;
    }

    .grid-content {
    height: 130px;
    margin-bottom: 50px;
    }

    @media only screen and (max-width: 815px) {
    .responsive #top #wrap_all .grid-sort-container .grid-entry {
    width: 100%;
    }
    }

    Now it works how I imagined, so thank you again! :D

    Have a nice weekend!

    Robi

    #705604

    Hi Robi,

    Glad we could help :)

    Best regards,
    Nikko

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Portfolio grid padding in mobile view’ is closed to new replies.