Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 17, 2016 at 7:20 pm #687987
    Golfergirl

    Hi there,
    I am having some issues with photos on the team page of Enfold- Gym being cut off. This happens on desktop and ipad.
    Can you help with the responsive settings to stop this?
    BTW…The text on the sliders is not adapting either.

    Thank you for your time.

    September 20, 2016 at 12:23 am #688861
    Golfergirl

    I switched to Revolution slider, which seems to be better for tablet and mobile.
    I still need to solve the team page responsive problems. A quick resolution would be very much appreciated.

    September 20, 2016 at 2:54 pm #689277
    Yigit

    Hi,

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

    @media only screen and (max-width: 1024px) {
.page-id-517 .av-layout-grid-container {
    display: block!important;
}
.page-id-517 .flex_cell {
    display: block;
    width: 100%!important;
}}

    Best regards,
    Yigit

    September 20, 2016 at 4:14 pm #689386
    Golfergirl

    Hi Yigit,

    I tried that and it doesn’t work. Still being cut off vertically at some sizes and horizontally in others.
    Any other suggestions?

    Thanks, Tamara

    September 20, 2016 at 10:27 pm #689563
    Golfergirl

    Hi Yigit,
    I have had some progress between your css and adjusting the background image position to Top Left instead of Center.
    Your css works for the images being cut in half vertically on a tablet. At 100% though, they were just left with heads and no torso, so I changed it to 80% and it looks better.
    I know ENFOLD has been around for awhile, but shouldn’t this all be done with media queries?
    The picture size is dictated by how much text and how big the screen size is. It would be great if everything could adapt as a whole and be truly responsive.
    Thanks for your help.
    Kind regards,
    Tamara

    September 26, 2016 at 5:26 am #691452
    Ismael

    Hi,

    The cell or color section background options should be use for images without actual focal point (http://bit.ly/2diV7lL), not portrait images because the background size property is set to “cover” (http://bit.ly/1M8TSNW) which means that the background image will cover the whole container but parts of the image have to overflow outside the container to keep its aspect ratio. We can set the background size to 100% but it will distort the image. 

    .avia-full-stretch {
    background-size: 100% 100% !important;
}

    Best regards,
    Ismael

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