Support Center Visit Demo License manager Buy @ envato

want fix slider look when mobile rotated

rorypory333rorypory333
in Revolution Slider

I have created slides based on the demo.

https://themes.muffingroup.com/be/spa6/

When I place it on my website it displays correctly, but when I rotate my smart phone to the side, the design is to the left. Where can this be fixed?

https://test.maru-cafe.net/



Thank you

IMG_3290.PNG


Comments

  • PhilPhil

    Hi,

    Please, put the shortcode of this slider in the Gutenberg editor, switch our theme to some free theme like Twenty Twenty, and check if the same thing happens.

    I have checked your website on iPhone 12, and it seems that this problem appears on Safari but not on Chrome.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rorypory333rorypory333
    edited March 2022

    Hi, 

    I made this page Gutenberg editor and switched our theme to a Twenty Twenty2 now. 

    http://test.maru-cafe.net/?page_id=2143

    Since I am not used to using Gutenberg editor so I could not set the full-wide width.


    The funny thing is this demo site

    https://themes.muffingroup.com/be/spa6/

     looks fine when I rotate my iphone 7plus but my new site.

     I'm wandering what is different setting.


    Is anything else I can do for this?

  • PhilPhil

    Please send us WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

    Notice!

    Please attach a link to this forum discussion.

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • PhilPhil

    The root cause is setting Dont Force Fullwidth in the layouts option of the slider.

    image.png

    When I disabled it, the space on the right in the slider does not appear anymore.

    To ensure that, can you check that, please?


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rorypory333rorypory333

    Thank you for your instructions.


    When I disabled the Dont Force Fullwidth setting, it now displays correctly on my iphone. 

    However, at the same time, the slider contain was overhanging at the macbook size.

    スクリーンショット 2022-03-15 23.03.49.png


    I confirmed the demo slider settings, but it seems that Dont Force Fullwidth is set to ON in the slider's layout options.

  • PhilPhil

    You can move the whole content to the right on the slider for desktop display, so it will not be overlapped by the menu.


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rorypory333rorypory333
    edited March 2022


    I am a little confused.

    I created a new slide from scratch based on the demo slider. As you say, the desktop preview seems to be designed to cover the entire surface.

    How can I move the entire content to the right in the slider for the desktop view on the Create Slider screen? (Open space on the left side to fit this template)

  • PhilPhil

    When you open the slider, the desktop view is chosen by default.

    Drag and drop the layers to the right, or use the Size & Poz option from the right panel.

    image.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rorypory333rorypory333

    Do I have to move each part to the right and downsize it for desktop display?

    How can I calculate how much it needs to be moved or reduced compared to the default?


    This default setting is very simple, IMAGE is x:0 y:0 w:2/3 H:2/3.

    I am afraid that moving or reducing size will destroy the display.

    スクリーンショット 2022-03-16 22.43.58.png


    Spa6 theme default slider layout is [Dont Force Fullwidth] is "ON". Then both desktop and mobile rotation are displayed without any problem.


    Is there any way to programmatically specify the display size and position when in desktop view or when in mobile rotation?

  • PhilPhil

    In the top bar, you can find an option to edit a specific layout (by turning it on).

    obraz.png

    However, there is no setting for rotated mobile view.

    You can learn more about Slider Revolution options under the following link:

    https://www.sliderrevolution.com/manual/how-to-use-this-manual/

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rorypory333rorypory333

    Then I will start to create a design for the desktop display.

    At the same time, can I ask you to check if it is possible to control the desktop display of a design created like the default one, e.g. with CSS or JS?

    I purchased the theme because of the templates, so it's somewhat disconcerting to have to recreate them.

  • PhilPhil

    I have added CSS code moved the slider to the right and turned off Dont Force Fullwidth option.

    Please, check that.

    However, I have made some tests with the Spa6 slider on the Twenty Twenty theme in my environment, and the same issue appeared. If the same thing happens on another theme, it means that it appeared in one of the Slider Revolution updates.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rorypory333rorypory333

    Thanks for adding the CSS code. I checked and it did not change.

    I will try to create a design for desktop display.

    Thank you very much.

Sign In or Register to comment.