Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 5, 2024 at 4:44 pm #1442357
    clbdcnpafe

    Hello,

    In the Private Content section, we are providing two links, one which in the smartphone version shows body text without the fold/unfold feature turned on, and the other with that feature turned on. That second page version includes the word “defect” in the link. You will see that in the second version, the page does not set up correctly; the right side of the body text extends beyond the limits of the screen.. We have tried making text font size smaller but that does not solve the problem.

    NOTE: The fold/unfold feature works fine on laptop/desktop screens.

    Please let us know if this can be fixed without quick css; the goal here is to make sure that the “Read More” text works on smartphones with different screen sizes, not just one size.

    Let us know if screenshots will help; not sure how to send them here.

    Thanks,

    Cliff

    May 5, 2024 at 5:57 pm #1442365
    Mike

    Hey clbdcnpafe,
    Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 481px) { 
#avia_sc_text_7 #attachment_34258,
#avia_sc_text_7 p {
	max-width: 361px!important;
}
}

    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.

    Best regards,
    Mike

    August 8, 2024 at 9:43 pm #1464182
    clbdcnpafe

    Hi Mike,

    Thanks for this. Keeping in mind that we wish to use the “fold/unfold” option (“Read more”), if you look at the webpage after the Quick CSS code is added, almost all of the text appears on a phone screen but a bit is still cut off on the right. Problem is worse with images and the image captions. Take a look: the full caption for the the second image is ““Moderne Musik — Moderner Tanz” Karl Jakob Hirsch (Germany, 1892-1952)”. Also, almost all of the image appears but not all, it is cut off on the right. I’ve put the link and its password for this page (the first page) in private content.

    We tried duplicating the text box and making one text box viewable only on larger screens and the duplicate only on smaller screens (adjusting responsiveness). The problem is that, then, TWO READ MORE / READ LESS prompts appear on large screens and small.

    A larger issue: we copied that page to another (second page in private content) which we must also share to site visitors. Text and images are substantially cut off on the right. We tried duplicating the Quick CSS solution you provided, changing the page number to 35903 but that did not work. Are we limited to just one page for these adjustments?

    Bottom line question: Is there a Quick CSS (or any other) solution that will allow for two pages appearing correctly on smartphones when using Fold/Unfold?

    Thanks.

    August 9, 2024 at 5:30 am #1464209
    Ismael

    Hi,

    Thank you for the info.

    Please try to add this css code:

    .avia-fold-unfold-section .av-fold-unfold-container .avia_textblock {
    display: block;
}

    Let us know of the result.

    Best regards,
    Ismael

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