Home Forums WoodMart support forum MOBILE PORTRAIT viewing on Slider Container not sticking to size

MOBILE PORTRAIT viewing on Slider Container not sticking to size

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #716464

    KevCh8
    Participant

    Hi

    Using the MOBILE PORTRAIT VIEWING OR VIEWING ON MOBILE PHONES, the Slider container is cutting off the container below it which is cutting off the container’s image and leaving black black spaces between containers. At the very top of the page in http://www.teknifi.co.za/moving/sandton, I have 10 sliders. The following sliders are doing as follows:

    Slider 1:-> Seems to be fine but the Teknifi logo is pushed all the way to the top and overlaps parts of the Slider image
    Slider 2:-> Slider container Moves upwards but shows parts of the previous slider’s image (Slider 1) – on the actual mobile the logo at the top overlaps the text of the slider.
    Slider 3:-> Slider container Moves downwards but leaves a blank black space at the bottom of the Slider container – on the actual mobile the logo at the top overlaps the text of the slider.
    Slider 4:-> Slider container Moves upwards but leaves a blank black space at the bottom of the Slider Container
    Slider 5:-> Slider container Moves upwards but leaves a blank black space at the bottom of the Slider Container – on the actual mobile the logo at the top overlaps the text of the slider.
    Slider 6:-> Slider container Moves even more upwards and cuts off parts of the image in below container. Parts of Slider 5 Wallpaper image is visible in Slider 6 Container – – on the actual mobile the logo at the top overlaps the text of the slider.
    Slider 7:-> Slider Container Moves downwards, image in below container is now visible. Parts of Slider 5 Wallpaper image is visible in the Slider 6 Container
    Slider 8:-> Slider container moves Upwards and parts of Slider 5 and 7 wallpaper is visible at the bottom of the Slider container – – on the actual mobile the logo at the top overlaps the text of the slider.
    Slider 9:-> Slider Container moves downwards and show blank black section between the 2 containers.
    Slider 10:-> Slider Container moves upwards but shows a blank black section between the 2 containers. – – on the actual mobile the logo at the top overlaps the image of the slider (NOT shown on Mobile portrait viewing).

    On MOBILE PORTRAIT VIEWING Logo STICK at the VERY TOP OF CONTAINER but does not show this when you use your mobile phone.

    How do I fix the Slider container so that it is fixed and does not move up or down and does not show parts of the previous slider images.

    In other previews such as the desktop Preview, iPad Preview and Laptop preview, it sticks and stays the same size and it is not cutting off images or showing/overlapping previous slider images.

    #716523

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Could you please elaborate on your concern more with some useful screenshots for better understanding that demonstrate the problem, so we can understand and reproduce it on your website?

    Also, share your site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

    Best Regards

    #716769

    KevCh8
    Participant

    Hi

    Thank you so much for you prompt response. I have attached the screenshot with explanations in the screenshot of what is happening to which I would like to sort out.

    Regards
    Kevin

    Attachments:
    You must be logged in to view attached files.
    #716783

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please follow the steps below:

    1. Using Different Images for Different Devices
    WoodMart allows you to swap the entire background image based on the user’s device. This is the best way to ensure your “Portrait” mobile crops look just as good as your “Widescreen” desktop ones.

    The Step-by-Step:

    1. Navigate to Slides > All Slides in your WordPress dashboard.
    2. Open the specific slide you want to edit.
    3. Look for the Image tab (usually under “Background”).
    4. You will see icons for Desktop, Tablet, and Mobile.
    5. Click the Mobile icon—this allows you to upload a separate, vertically-oriented image specifically for phones.
    6. Save and refresh your site on your phone to see the change.

    2. Reducing Banner Height for Mobile & Tablet
    If you don’t want to change the image but simply want the banner to take up less vertical space on smaller screens, you need to adjust the Padding or Minimum Height settings.

    The Step-by-Step:

    1. In the same Slide Edit screen, go to the Design or Style tab.
    2. Find the Height or Padding fields.
    3. Click the Mobile Icon next to the height setting.
    4. Change the value (e.g., if Desktop is 600px, try setting Mobile to 300px or 40vh).
    4. If you are using Elementor to host the slider, click the “Section” or “Column” editing handle, go to Advanced > Responsive, and adjust the padding specifically for the mobile view.
    https://streamable.com/qmh3sh

    Best Regards

Viewing 4 posts - 1 through 4 (of 4 total)