Float right not working on mobile

Hi Pixies,

You shuttle controls are set to a fixed width of 1170px (instead of a %), which is messing with the responsiveness of your site. In other words, it is making a scroll bar appear when the viewport size gets smaller than a full screen computer (or 1170px in this case).

You can replace your bootstrap.css stylesheet in the media queries area, like below. Although not perfect, it will adjust your back and next buttons pretty close to what they need to be. Do a search for “@media” in the file and you will find this section. This also removes fixed-width containers. Replace all media queries with what’s below:

@media (min-width: 300px) {
  .ctrls {
    width: 85% !important;
  }
}
@media (min-width: 600px) {
  .ctrls {
    width: 90% !important;
  }
}
@media (min-width: 800px) {
  .ctrls {
    width: 93% !important;
  }
}
@media (min-width: 992px) {
  .ctrls {
    width: 93% !important;
  }
}
@media (min-width: 1200px) {
  .ctrls {
    width: 94% !important;
  }
}

Also in your bootstrap.css stylesheet, there is a section that styles the container div (right above the media queries). Add this line:

width: 100%;

so that it looks like this:

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  zoom: 1;
}

This next part needs to go into your style.css stylesheet. It will make your shuttle controls respond to the width of the screen. It will also make sure that your images are centered on the screen and in between your shuttle controls when your screen size gets much bigger than the width of the images.

/* Modify the .ctrls class like this: */
.ctrls{
    z-index:9999;
    position:absolute;
    /* change width from 1170px to 94% */
    width:94%;
    margin:auto;
    top:50%;
    /* comment out the left setting */
    /* left:0px; */
}

/* ADD THIS ANYWHERE - make sure images are centered when needed */
img[data-imgno] {
    margin-left: auto;
    margin-right: auto;
}

Anyway, this should remove your horizontal scroll bar.

Wow! That’s quite an epic answer, thanks so much Mizagorn ?? I’m quite new, in fact very new to altering code etc…so I’ll go and have a go now…..
Thanks again very very much appreciated :))

Well the bootstrap code wasn’t exactly as you said…so I kinda left that as it was after a lot of head scratching and wondering where I might but what you suggested…
Anyway I then just tried changing what you suggested for the style.css – this worked a treat :)))) The arrows are now within the gallery/carousel container both on desktop and mobile. Seems to work well on Apple devices, not managed to check yet on Android but hopefully should be resolved as well.

Thanks again Mizagorn ??

Hello again!

The “@media” lines in the first block of code above are to replace the “@media” lines you have in the bootstrap.css file, lines 687-701. I’m sorry I didn’t make that more clear!

The bootstrap.css file should be in the same folder as your style.css, if Chrome is telling me correctly. ??

Thanks Mizagorn. I’ve just tried this, but I think we’ll stick with just changing the style css, as the arrows move further away from the image and the container box becomes too big when on large monitors, compromising the design slightly. I guess it’s a compromise between code and design!

Thanks again, your help has been invaluable ??

Just an update incase anyone else is having the same probs…
I’ve now changed the bootstrap css as the first box above, but kept the final @media to

@media (min-width: 1200px) {
.container {
width: 1170px;
}

but not added the 100% width bit as this then put page on right on larger screens.

so now looks good on all size screens :)))))
Thanks a a million times again Mizagorn :))))))))

Awesome!! Good job, and I bet you feel great about what you learned. I know I do when that happens! ??