-
AuthorPosts
-
August 6, 2015 at 11:13 am #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!
August 6, 2015 at 7:15 pm #484107Hi 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!
AndyAugust 12, 2015 at 9:54 am #486349Dear 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,
SimonAugust 12, 2015 at 10:32 am #486366Hey!
Can you please change the code to following
li.slide-6 img { left: -100px !important; }
Best regards,
YigitAugust 12, 2015 at 3:28 pm #486620Dear 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 9 years, 3 months ago by parperei.
August 13, 2015 at 2:08 pm #487196Hey!
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,
AndyAugust 13, 2015 at 3:36 pm #487252Dear 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!
August 13, 2015 at 9:20 pm #487443Hey!
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,
AndyAugust 14, 2015 at 10:44 am #487642Dear 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? :|
August 14, 2015 at 11:48 am #487679Hey!
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 9 years, 3 months ago by Andy.
August 14, 2015 at 5:20 pm #487845Hey 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!
August 14, 2015 at 6:24 pm #487875Hi!
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 -
AuthorPosts
- The topic ‘Fullwidth Slider on Mobile: Center all Images or change x-position indivually’ is closed to new replies.