Title: Float right not working on mobile Last modified: August 22, 2016 --- # Float right not working on mobile * Resolved [PixiesintheCellar](https://wordpress.org/support/users/pixiesinthecellar/) * (@pixiesinthecellar) * [11 years, 11 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/) * Just noticed our right control scroll arrow is too far to the right on mobile devices * [http://www.pixiesinthecellar.co.uk](http://www.pixiesinthecellar.co.uk) * the css for the curls is: * .carousel-ctrl.left { float:left; left:-30px; position:relative; } .carousel- ctrl.right { float:right; } * If I add right: 200px then it’s good on mobile but not on desktop, arrow is then in the frame of the gallery images…. Any ideas? Viewing 8 replies - 1 through 8 (of 8 total) * [Mizagorn](https://wordpress.org/support/users/mizagorn/) * (@mizagorn) * [11 years, 11 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459266) * 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. * Thread Starter [PixiesintheCellar](https://wordpress.org/support/users/pixiesinthecellar/) * (@pixiesinthecellar) * [11 years, 11 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459293) * 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 :)) * Thread Starter [PixiesintheCellar](https://wordpress.org/support/users/pixiesinthecellar/) * (@pixiesinthecellar) * [11 years, 11 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459316) * 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 🙂 * [Mizagorn](https://wordpress.org/support/users/mizagorn/) * (@mizagorn) * [11 years, 11 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459337) * 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! * [Mizagorn](https://wordpress.org/support/users/mizagorn/) * (@mizagorn) * [11 years, 11 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459338) * The `bootstrap.css` file should be in the same folder as your `style.css`, if Chrome is telling me correctly. 🙂 * Thread Starter [PixiesintheCellar](https://wordpress.org/support/users/pixiesinthecellar/) * (@pixiesinthecellar) * [11 years, 11 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459349) * 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 🙂 * Thread Starter [PixiesintheCellar](https://wordpress.org/support/users/pixiesinthecellar/) * (@pixiesinthecellar) * [11 years, 10 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459425) * 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](https://wordpress.org/support/users/media/) to * [@media](https://wordpress.org/support/users/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 :)))))))) * [Mizagorn](https://wordpress.org/support/users/mizagorn/) * (@mizagorn) * [11 years, 10 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459426) * Awesome!! Good job, and I bet you feel great about what you learned. I know I do when that happens! 😀 Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Float right not working on mobile’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [float right](https://wordpress.org/support/topic-tag/float-right/) * [mobile](https://wordpress.org/support/topic-tag/mobile/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 8 replies * 2 participants * Last reply from: [Mizagorn](https://wordpress.org/support/users/mizagorn/) * Last activity: [11 years, 10 months ago](https://wordpress.org/support/topic/float-right-not-working-on-mobile/#post-5459426) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics