Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 13, 2024 at 2:26 pm #1466909
    condonp

    please see hompeage at peter-test1.co.uk. There are three images below headings “we are purveyors of stylish eyewear heading” we are using three grids sections for each with a background image on opposite side of the text. the issue is that on an iphone on portrait looks ok. As we have text followed by the full image. However on landscape mode the image is cut off a looks horrible. Is there any way to get it to render the same so it shows as portait with text and full image below?

    I can provide credentials if needed see below

    September 14, 2024 at 10:34 am #1466969
    Rikard

    Hey condonp,

    Could you post a screenshot highlighting the problem please?

    Best regards,
    Rikard

    September 14, 2024 at 3:00 pm #1466982
    condonp

    So on iphone portrait all ok can see full image see https://peter-test1.co.uk/portrait.jpg however on Landscape mode the full image in compromised see screenshot see https://peter-test1.co.uk/landscape.jpg so clients want it to behave as portrait so text is above image and full image below. Can you please help

    • This reply was modified 2 months ago by condonp.
    September 16, 2024 at 4:40 am #1467046
    Ismael

    Hi,

    Thank you for the screenshots.

    Please add this css code to adjust the fullwidth breakpoint of the Grid Row cells:

    @media only screen and (max-width: 1024px) {
  .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;
  }

  .responsive #top .container .av-content-small,
  .responsive #top #wrap_all .flex_column,
  .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }
}

    Best regards,
    Ismael

    September 16, 2024 at 9:26 am #1467061
    condonp

    Imael,

    Thanks for this there are however a few issues after putting in the modified css.

    1) The secondi mage when seen on iphone landscape is out of order ie the second image come directly below the first where there should be the text. I have lated the position 1 & 2 in the grid but this does not have any effect. see

    2) Also in landscape mode the height of images are cut off and are not at their full height.

    September 17, 2024 at 5:27 am #1467165
    Ismael

    Hi,

    Thank you for the update.

    To adjust the order of the cells, please include the following code inside the css media query:

    .av-layout-grid-container { 
    display: flex; 
    flex-direction: column; 
}

    To adjust the height of the cells containing the image, please edit the cells, go to Advanced > Developer Settings and apply the value av-cell-min-height-500 to the Custom CSS Class name field. Then, include this code in the css media query:

    .av-cell-min-height-500 { 
    min-height: 500px; 
}

    Best regards,
    Ismael

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