Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 23, 2023 at 4:39 pm #1399027
    isdixon

    Hi on my home page there are three boxes with text – “Commercial Ceaning”, “specialist Domestic Cleaning” and “Why Choose Us”

    When viewing on an ipad in portait The titeles and buttons become unaligend.

    How do I stopp this from happening please?

    February 24, 2023 at 7:26 am #1399082
    Ismael

    Hey isdixon,

    Thank you for the inquiry.

    The title in the boxes seems to be aligning correctly on our end. Would you mind providing a screenshot of the issue? Please use imgur, savvyify or dropbox for the screenshot.

    Best regards,
    Ismael

    February 24, 2023 at 12:45 pm #1399146
    isdixon

    Hi please see images attached, also you will see the navigation bar overlaps the logo onthe ipad in prtrait mode

    February 25, 2023 at 11:37 am #1399231
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
.avia-button.avia-size-x-large {
    min-width: auto;
}
}

    Best regards,
    Rikard

    February 28, 2023 at 7:05 pm #1399564
    isdixon

    Hi this has not changed the sizes of the H2s they still do not fit inside the box “Commercial Cleaning”, “Specialist Domestic Cleaning” and “Why Choose Us”

    March 1, 2023 at 9:16 am #1399627
    Ismael

    Hi,

    There seems to be a lack of space for the columns on tablet view, which is why the title and buttons are not aligned properly. We may need to adjust the breakpoint of the columns and make them fullwidth on tablet devices. Please add this css code.

    @media only screen and (max-width: 1024px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }

  .responsive #top #wrap_all .av-break-at-tablet-flextable, .responsive .av-layout-grid-container.av-break-at-tablet {
    display: block;
  }
}

    Best regards,
    Ismael

    March 1, 2023 at 2:56 pm #1399681
    isdixon

    Hi

    I would be happy for them to appear the same on tablet devices as they are on mobile devices, the latest attempt has not resolved the issue, can you advise how I make them full width on tablets?
    Thanks

    Ian

    March 2, 2023 at 6:36 am #1399749
    Nikko

    Hi Ian,

    Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width:1180px) {
  .page-id-734 #after_layer_slider_1 .container {
    width: 100%;
    max-width: 100%;
  }
}

    Best regards,
    Nikko

    March 5, 2023 at 10:34 pm #1400207
    isdixon

    Hi Nikko

    thank you for your response, unfortunately this doesnt seem to have worked, I dont see any change?

    March 5, 2023 at 11:19 pm #1400211
    Mike

    Hi,
    Thanks for the feedback, when I test Ismael‘s code above the three columns “Commercial Cleaning”, “Specialist Domestic Cleaning” and “Why Choose Us”
    all become full-width at 1024px this should be correct for an iPad in portrait, perhaps yours is different please check your iPad screen resolution here
    Try Ismael‘s code again:

    @media only screen and (max-width: 1024px) {
  .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }

  .responsive #top #wrap_all .av-break-at-tablet-flextable, .responsive .av-layout-grid-container.av-break-at-tablet {
    display: block;
  }
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.
    Please note that iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
    If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance and check if you have an error in your css.
    Also please upload a new screenshot of the error as the original one has expired.

    Best regards,
    Mike

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