Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #483783

    Dear all,

    I hope this is just a small missing hint, I am asking for.

    Please look at my fullwidthslider on mobile view (see private content).

    1. Is it possible to center all the images of the fullwidth slider on mobile view? I already built this

     	
    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
       .home #full_slider_1 img {
         height: auto !important;
         min-width:1191px !important;
       }
    }
    

    When I add “position:relative; left:-50px;” to “.home #full_slider_1 img” it seems to work, at first.
    But each time the slider rotates to the next image, the next image appears not centerd but aligned to the left. This causes a strange look.

    2. Alternativly, would it be possible to individually align each x-positon of an image? Something like

    
    .slide-1 .avia-slide-wrap {position relative; left:-100px;}
    .slide-2 .avia-slide-wrap {position relative; left:-250px;}
    ...
     

    Kind regards!

    #484107

    Hi Simon!

    try this code to move every single image:

    @media only screen and (max-width: 767px) {
    li.slide-1 {
    left: -100px !important;
    }
    li.slide-2 {
    left: -100px !important;
    }
    li.slide-3 {
    left: -100px !important;
    }
    li.slide-4 {
    left: -100px !important;
    }
    li.slide-5 {
    left: -100px !important;
    }}
    

    adjust as needed.

    Cheers!
    Andy

    #486349

    Dear Andy,

    I added the snippet, without the desired effect. Please compare slide 6 (the last slide), where I added:

    li.slide-6 {
      left: -100px !important;
    }

    Results:
    Not only the image of slide 6 moves to the left, also the textbox does so.
    When switching to the next/prev slide the image jumps out of focus.

    Cheers,
    Simon

    #486366

    Hey!

    Can you please change the code to following

    li.slide-6 img {
      left: -100px !important;
    }

    Best regards,
    Yigit

    #486620

    Dear Yigit,

    I did as you asked, but without desired effect. When switching i.e. from slide 1 to slide 6 there appears to be something broken, the image jumps. The text is now in normal position again. The other slides look well, only from slide 5 to slide 6 and slide 1 to slide 6, it seems to break the moving of the images… All other slides look as expected.

    Cheers,
    Simon

    • This reply was modified 3 years, 3 months ago by  parperei.
    #487196

    Hey!

    I can’t see any issue/jumping from slide 5 to slide 6. The issue from slide 6 to 1 is caused by strange values of min-width in this code:

    @media only screen and (max-width: 767px) {
    .home #full_slider_1 img {
    height: auto !important;
    min-width: 1191px !important;
    }}
    

    Change it to something like this:

    @media only screen and (max-width: 767px) {
    .home #full_slider_1 img {
    min-width: auto !important;
    height: 200px !important;
    }}
    

    Regards,
    Andy

    #487252

    Dear Andy,

    thanks for the information. Now, the source looks like this:

    @media only screen and (max-width: 767px) {
     	.home #full_slider_1 img {
            min-width: auto !important;
    		height: 130px !important;
        } 
    	li.slide-6 img {
    		min-width: 100% !important;
    }

    When you look at the slider, you will see that all images appear to be vertically stretched (i.e. the picture of slide-2: yellow sign on the grey clouds).
    I tried to get rid of this non-proportional scaling by using min-width (example = slide 6).
    Unfortunately, it does not work for me, maybe because I made a mistake in “li.slide-6 img”?

    May you help me to achieve that all slider-images appear with 100% width?

    Then everything would be fine. :)

    Cheers!

    #487443

    Hey!

    not sure what you mean, because all your image are 100% width. Are you talking about height? You can control it by changing the height value of your code in your previous post (height: 130px !important;).

    Regards,
    Andy

    #487642

    Dear Andy,

    I refer to the mobile view: everything lower than @media only screen and (min-width: 768px), lines 1666… in the css-file.
    There, the slider images don’t have the correct aspect ratio: they are stretched in height.

    Is it possible to let the slider-images appear unstretched, while presevering the height (so that the text stays readable)?

    I imagine, the slider-images inside the container could be cropped on the left and right side, via overflow:hidden… but how? :|

    #487679

    Hey!

    I know it’s about mobile view. So it’s about height and not width, right? I think screenshots would help a lot to make things clear … please use imgur.com or dropbox.
    If the images don’t have the correct height, then please just adjust height value in your code, as I already mentioned.

    Is it possible to let the slider-images appear unstretched, while presevering the height (so that the text stays readable)?

    Not sure what you mean with this, because about which text are you talking about? Basically you are asking: “How can I change height without changing height?”
    I am confused. Please use screenshots to make things clear.

    Regards,
    Andy

    • This reply was modified 3 years, 3 months ago by  Andy.
    #487845

    Hey Andy!

    sorry, it must be the hot weather here in Germany;)

    I attached two images, first one shows imageslide with wrong aspect ratio.
    Second one shows my attempt, what I was able to achieve until now.

    Meanwhile I stumbled upon an idea of Josue, to just add a second slider with optimized images for mobile version. The idea is to hide the desktop slider on mobile and vice versa.

    So to put it short: Issuee is solved due to a different approach.

    I hope this is okay for you, because I caught your time and now I decided to move on with an other idea. But it seems too complicated to get proper results with just one slider…

    Kind regards and again: ice-cold greetings from Germany to Switzerland! :)

    Cheers!

    #487875

    Hi!

    glad you found a solution for you. Let us know in a new ticket if you have some more questions. We are happy to assist.

    Regards,
    Andy

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

The topic ‘Fullwidth Slider on Mobile: Center all Images or change x-position indivually’ is closed to new replies.