“Narrow Layout Content Max Width” Slider Issue

  • Resolved ralphw

    (@ralphw)


    1 month, 2 weeks ago

    Hello!

    I was told by a client that her phone shows one of my pages with broken text.
    What happens in her phone is that the top line of text gets pushed over to the far left and forms into a single-character column.
    (On my phone, it looks just fine.)

    She sent me a screenshot, and I used Chrome on my laptop, going to the “Developer tools” built-in application, and set the dimensions to “Samsung Galaxy S20 Ultra” to be able to emulate the page to see what my client saw.
    NOT pretty!

    Going in to the Kadence Customizer, I thought it a simple fix to adjust the Narrow Layout Content slider from 812 px for the Desktop view, click on the Mobile view, adjust the max width to 360 px, and all would be well. While that indeed fixed the mobile view, the slider adjustment remains fixed for the desktop view, and makes the website unusably narrow when viewed on a desktop.

    Is there a way to unlock this setting so that an adjustment made for mobile does NOT adjust the Desktop?
    (Also, if you think it helpful, I can make some screen-captures, upload them to my Google Drive, and post a link to them here.)

    Thanks!

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter ralphw

    (@ralphw)

    I created a work-around, but would still like an answer to my question.
    The original page I had posted about now has the fix, the cloned page with the issue I’d still like to see resolved is now located at ralphcare.com/fast-fixes-d/

    Thanks!

    Hi, Ralph!

    I’m here to help.

    I viewed the https://ralphcare.com/fast-fixes-d/ page but I didn’t see any slider. Could you confirm which block you’re using for the slider?

    I want to test it on my website and see what settings I could recommend.

    Thread Starter ralphw

    (@ralphw)

    Hi, Karla…

    I appreciate your reply. I can see how my choice of words was not ideal for describing the issue.
    I am not referring to a “Slider” as in a slide-show or similar app.
    What I was trying to describe is the navigational device, also called a “slider,” used in the Customizer to adjust the width of the content. (You rest the mouse cursor over the slider, hold down the left mouse button, and drag it, the slider, left or right to adjust the width.)
    More clear?
    Thanks!

    Hi, Ralph!

    Yes, clearer now.

    There are options that has “responsive” values. You should be able to identify that if you see the three device icons beside the option name like this – https://share.zight.com/8LueJz6j

    However, Narrow Layout Content Max Width option doesn’t have these. This is why the value will be set for all screen sizes.

    I checked your page and the content width is not an issue – it’s the image that’s aligned right and the text wrapping around it is the issue.

    A solution that I can recommend is use our Kadence Blocks plugin’s Image(Adv) block. This way, you’ll have “responsive” max width settings for the image. Also, you can remove the left margin on mobile views so the image will look centered on smaller mobile screens. Here’s a screencast of how it worked for me – https://share.zight.com/nOu2NyJr

    Let me know if I can help you further.

    Thread Starter ralphw

    (@ralphw)

    Thank you, Karla!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.