Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 20, 2020 at 3:10 pm #1261794
    BelIblis

    Hi,

    Can someone please show me how to target font-sizes for the full-width slideshow?
    I’d like to change the headline / copy and button font sizes.

    The slideshow has its aspect-ratio locked to a very wide 7:2, and so I’m struggling with vertical space, especially on mobiles.
    I nearly had it working fine. When I narrow my computer’s browser-window to 500-767px width, it looks fine on various browsers. But on an actual small mobile phone (iPhone 5se for example), I can’t get it to work properly and the “Contact” button gets moved down too far. (Please see private content below for the link to the problematic page).

    This is the CSS I’m using for desktops larger than 990px:

    @media only screen and (min-width : 990px) {
    .slideshow_caption {width:90vw!important;}
    .slideshow_caption h2 {width:35vw; font-size: 2.5vw!important; line-height: 3vw!important;}
    .slideshow_caption p  {width:35vw; font-size: 1.7vw!important; line-height: 2.5vw!important;}
    .slideshow_caption a.avia-slideshow-button.avia-button {font-size: 1.2vw!important;}
}

    I also tried to completely remove my custom CSS code and use the Slideshow element’s built-in font-size options for desktop/iPad/mobile. But that didn’t work either. (I even tried an extremely small 10px font size for both the headline AND the copy text – and on my mobile, the copy was twice the size of the headline. I even removed the Advanced Stylig setting for the “p” element inside the theme options – no luck.

    I would really appreciate some help here. Apart from this font size problem, the page is pretty much finished and ready to be published…

    • This topic was modified 4 years ago by BelIblis.
    November 25, 2020 at 4:17 am #1262885
    Ismael

    Hey BelIblis,

    Thank you for the inquiry.

    Looks like you have managed to adjust the font size of the slideshow caption heading to 10px and the content to 12px using the following css code.

    .slideshow_caption p {
	hyphens: none !important;
	width: 70vw;
	font-size: 12px !important;
	line-height: 110% !important;
}

.responsive #top #wrap_all .av-mini-font-size-10 {
	font-size: 10px !important;
}

    Have you tried using the Full Screen Slider element instead of the current one? This slider will have more space for the caption and other content in general.

    Best regards,
    Ismael

    November 25, 2020 at 5:04 pm #1263032
    BelIblis

    Thanks Ismael,

    Yes – that’s the css code I used. Strangely, though: on a narrow (iphone-width) browser window on my computer, the headline and copy on the home page looked fine. But on an actual iPhone, the copy was smaller than the headline.
    Would be interested to know why this could be?

    (Problem solved, though, by following your advice. Using a full-page slider for mobile.)

    November 27, 2020 at 5:35 am #1263448
    Ismael

    Hi,

    (Problem solved, though, by following your advice. Using a full-page slider for mobile.)

    You are welcome! Glad we could help. Please let us know in another thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Slideshow overlay text size’ is closed to new replies.