Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 18, 2016 at 8:28 pm #700834
    caroberto6

    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).

    Fenntartható élet

    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

    October 19, 2016 at 3:57 pm #701393
    caroberto6

    I am sending the pictures, too

    October 21, 2016 at 2:12 pm #702398
    Andy

    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

    October 21, 2016 at 2:53 pm #702430
    caroberto6

    Hi,

    I’m sending the information below.

    October 24, 2016 at 7:16 am #703134
    Ismael

    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

    October 24, 2016 at 8:53 am #703152
    caroberto6

    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

    October 26, 2016 at 4:17 pm #704392
    Nikko

    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

    October 26, 2016 at 4:56 pm #704426
    Vinay

    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

    October 29, 2016 at 12:43 pm #705503
    caroberto6

    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

    October 29, 2016 at 7:39 pm #705604
    Nikko

    Hi Robi,

    Glad we could help :)

    Best regards,
    Nikko

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