Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 12, 2020 at 5:54 pm #1252312
    condonpb

    I am devloping a new webiste using enfold and have a product page see https://www.peter-test1.co.uk/?page_id=1734. On a desktop this renders fine however the issue is with an ipad the text seems to be aligned to left and is elongated see https://www.peter-test1.co.uk/respect-2.jpg my client does not like this, is it possible to have thsi centred as in https://www.peter-test1.co.uk/respect-3.jpg. I have enclosed the back end set up https://www.peter-test1.co.uk/respect-4.jpg.

    I hope this makes sense

    Pete

    October 16, 2020 at 4:00 am #1253122
    Ismael

    Hey condonpb,

    Thank you for the inquiry.

    We could edit the first column in the row and set the Row Settings > Row Screen Options > Fullwidth Break Point to the second option so that the columns break or go full width on tablet view or devices with screens smaller than 989px.

    Best regards,
    Ismael

    October 23, 2020 at 9:57 pm #1255344
    condonpb

    Ismael,

    I have now tried this but this is not what the clients wants, for example, this does not work on iPad pro see https://www.peter-test1.co.uk/respect-5.jpg. What the client wants is on tablets the formats to render as https://www.peter-test1.co.uk/respect-3.jpg. Where the title is centralised with the images centralised below and aslo the text centralised underneath the images. Please can you advise how this can be achieved.

    Pete

    October 26, 2020 at 4:58 am #1255602
    Ismael

    Hi,

    Thank you for the update.

    The iPad Pro device is wider and has a much bigger screen resolution compare to non-Pro tablets, so the columns will display as they do on desktop view. To make the columns stack or make them full width on this device, we have to use the following css code.

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

    October 26, 2020 at 8:40 pm #1255825
    condonpb

    Ismael,

    I have added this code but no change see https://www.peter-test1.co.uk/?page_id=1930

    October 30, 2020 at 6:15 am #1256976
    Ismael

    Hi,

    Thank you for the info.

    It is it now working because the following css code overrides the other.

    .woow1 {
	margin-bottom: 20px;
	width: 50% !important;
	display: inline-grid !important;
}

    Please try to add the !important rule in the width property or move the css code that we suggested below the one above.

    Best regards,
    Ismael

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