Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 21, 2021 at 12:14 pm #1333630
    ladefogedpeter

    Hello,

    I am having issue with text optimisation on large screens with different sizes. It looks fine when the screen size is rather large (fx. computer monitor), but when it comes to a smaller size, which is still considered large screen (fx. laptop). text is not optimised and moves out of the borders or doesn’t just look right. See screenshots for reference.
    Is there a way to fix this?

    December 21, 2021 at 2:11 pm #1333642
    Mike

    Hey ladefogedpeter,
    Thank you for the screenshots and link to your site, please try this css in your Quick CSS:

    @media only screen and (min-width: 990px) and (max-width: 1440px) { 
#top.home #overlap .avia-image-container .av-image-caption-overlay-center {
	font-size: 1.4em;
	line-height: 1em;
	padding: 0px 1em;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    December 21, 2021 at 2:29 pm #1333649
    ladefogedpeter
    This reply has been marked as private.
    December 22, 2021 at 2:11 am #1333699
    Ismael

    Hi,

    Thank you for the update.

    You can apply a custom css class name or ID to the section or element. You can then use those attributes to adjust the style of a specific element. The custom class and ID fields are located in the elements’ Advanced > Developer Settings tab.

    Please check this documentation for more info.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    January 5, 2022 at 9:58 am #1334335
    ladefogedpeter
    This reply has been marked as private.
    January 5, 2022 at 1:23 pm #1334361
    Ismael

    Hi,

    Thank you for the update.

    Where did you derive the #home selector from? Did you add it somewhere in the page? If you want to apply the changes to the home page, you may need to use “.home” selector instead, which is a default class name for the front page.

    Please post the site URL in the private field so that we can inspect the elements and provide the necessary changes.

    Best regards,
    Ismael

    January 5, 2022 at 1:26 pm #1334362
    Rikard

    Hi,

    Thanks for the update. Are you trying to target the home class on your home page in the code you posted? If so, then please try this instead:

    @media only screen and (min-width: 990px) and (max-width: 1440px) { 
.home .maintitle {
font-size: 1.2em;
line-height: 1em;
padding: 0px 1em;
}
}

    The # character is used for ID’s only. Also, you might need to be a bit more specific in your CSS, as I see that you have different markup in the element which you applied the class to.

    To target the h1 element, you might need something like this:

    @media only screen and (min-width: 990px) and (max-width: 1440px) { 
.home .maintitle h1 span {
font-size: 1.2em;
line-height: 1em;
padding: 0px 1em;
}
}

    Best regards,
    Rikard

    January 6, 2022 at 9:53 am #1334499
    ladefogedpeter
    This reply has been marked as private.
    January 6, 2022 at 12:34 pm #1334511
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘text optimisation on large screens’ is closed to new replies.