• Resolved Leland

    (@addthisleland)


    Hi there,

    After the last 2 update, something about the responsiveness to either the font-size or layer where it is not being scaled down to fit within the background layer when in mobile view.

    If you were to view this website on mobile, the heading title overflows the slider background image and I cant seem to figure out why even though the mobile settings in the plugin are set so that things can fit properly.

    Any ideas?

    Thanks,
    Leland

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Ramona

    (@nextend_ramona)

    Hi @addthisleland

    The Adaptive scaling was deprecated in 3.5 because it caused performance problems:
    https://smartslider.helpscoutdocs.com/article/1746-changelog#3-5-0-0beta
    From 3.5 every texts behaves with Adaptive sizing: on.

    If your Absolute positioned layers are not nested:
    https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#nesting
    then turning on the Legacy font scale at Slider settings > Developer tab:
    https://smartslider.helpscoutdocs.com/article/1806-slider-settings-developer
    could help.

    If your Absolute positioned layers are nested, you could use the Font scale option:
    https://smartslider.helpscoutdocs.com/article/2028-sliders-look-different-after-the-3-5-update#font-size
    to adjust the size of the texts on smaller screens.

    1. Go to Smart Slider dashboard in wordpress and open the slider you want to edit.
    2. Open the slide you want to edit, but it looks like you only have the one, so go into edit mode on that slide.
    3. In the top right you’ll see a little eye icon and computer icon next to it, click the computer icon and change the view to smartphone view.
    4. Your edit mode should now be in the smaller mobile view. Mouse over the text section you want to fix. A little menu should appear above it saying something like “Layer AA …”
    5. Click on the AA bit of the menu and adjust the size of the text until it fits. This adjustment will only affect the size on mobile, so tablet and PC will still be good.
    6. Press the save button in the top right.

    • This reply was modified 2 years, 9 months ago by jaydek.
    Thread Starter Leland

    (@addthisleland)

    Hi @jaydek @nextend_ramona,

    I tried doing this but for some reason the font size is not updating.

    Here is what I see in the editor:

    View post on imgur.com

    Here is what I see on mobile:

    View post on imgur.com

    Not sure what I’m doing wrong but it seems like everything but the font-size is updating.

    Thanks,
    Leland

    @addthisleland

    Hmm, not really sure what’s going on there. It might be some glitch that happened with the update. I’m unable to reproduce it on my own system using a similar mock layout.
    I’d try deleting the old text layer and putting in a new one that is set up the same. Although try changing a couple of things:
    – In the screenshot, I see you have custom mobile text enabled for both tablet and mobile on the settings window, but the text is the same for each one. So those are not needed. Just use the one default text for all and disable tablet and mobile.
    – You’re also using Absolute positioning, which should be working OK, so give it a try after replacing the text layer. If it doesn’t work, try default positioning, but you’ll need to go through and adjust the text size and box position for tablet and mobile. you can adjust the box position using the margin settings at the bottom of the Style tab in the settings window.
    @nextend_ramona
    (RE, our other thread on the topic) This is another situation where having % instead of PX for the margin/padding settings would be better.

    • This reply was modified 2 years, 9 months ago by jaydek.
    Plugin Support Laszlo

    (@laszloszalvak)

    Hi @addthisleland

    The reason your font gets bigger is because you have some CSS in your theme that sets 16px font-size on all div elements on your site:

    html,
    body,
    div,
    table {
      font-size: 16px;
      line-height: 1.6em;
      font-family: 'Karma', sans-serif;
      font-family: var(--font-main), sans-serif;
      font-weight: 400;
      -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
      -webkit-font-smoothing: antialiased;
    }

    coming from this file:
    We adjust the font size on an outer div but this CSS sets a fix 16px font-size on the child div, so the paragraph will rather use that as a base, instead of the one that we calculate.

    Targeting all div elements on your site is too broad and will most likely cause other problems, too. You should either remove this CSS or your should make it more specific so it won’t target all div elements.

    Just some other tips:
    Absolute position is only for decoration. Content should always be added with Default position. So you should move that Text layer into Default position:
    https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#make-default

    For this layout you should probably add a Row with a Column, and put the text into the Column. Then you could set a maximum width on the Row and align the Content Layer’s Inner Aling to Right: https://smartslider.helpscoutdocs.com/article/1810-content-layer#content
    this way your Row with its contents would appear in the right side.

    Then to create some distance from the sides of the column, instead of using margins on the layer, you should rather use Padding on the Column it self:
    https://smartslider.helpscoutdocs.com/article/1813-column#size

    Finally a suggestion:
    If I check your mobile text in your screenshot it is barely visible. Squeezing the text in mobile view into such a small area isn’t a good idea, since this way the text be either too small ( so your visitors can not read it ) or since you have a very narrow area, your slider will become too high.
    We actually have a slider template with a similar layout, just the content is aligned to the right side. Feel free to use it as an inspiration source, or if you feel like you can modify this template according to your needs:
    https://smartslider3.com/feature-slider/

    @jaydek as @nextend_ramona mentioned in an another topic, in 3.5 we no longer have option to scale the font size of the texts up and down as you resize the width of the slider. ( If we take the old behavior, all texts behave as if the Adaptive sizing would be enabled on them – https://smartslider.helpscoutdocs.com/article/2028-sliders-look-different-after-the-3-5-update#font-size)
    So using different units couldn’t really make much sense as the font size won’t change. The font size only changes when you reach a breakpoint where you modified the Text Scale.

    Thread Starter Leland

    (@addthisleland)

    Thank you so much!

    It was indeed the theme’s CSS conflict. I really appreciate your help, you guys have one of the best Supports for a WordPress plugin I’ve experienced so far.

    Hope you both have a great one.

    @laszloszalvak

    Sorry if I was unclear. My suggestion was referencing positioning elements such as padding and margin settings.
    Honestly, with the changes in 3.5 and positional elements such as padding and margins locked in to PX only, my slider has turned into a positioning nightmare.

    • This reply was modified 2 years, 9 months ago by jaydek.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Text layer is overextending background layer on mobile view’ is closed to new replies.