I thought I was doing the good work, by finally learning Bootstrap, but I noticed that my page, that I made for the fCC ‘portfolio webpage challenge’ acts slightly annoying on my iPhone (i don’t have any other phones to test it with).
The problem: I don’t know if there is an official name for this behaviour so I’ll try to describe it: on small screens i can sort of ‘swipe’ the entire webpage to the left and right with a dragging motion with my finger which makes the page jump to either side with an ‘elastic’ motion. I wish it would just stay static.
When i move my phone in landscape mode it doesn’t do this anymore and it stays nicely still, so I cannot move it from left to right with my finger anymore. How come?
And how to solve this?
Is it simply a margin problem??
Or: Should each column have XS, Medium and Large classes declared? Should this always be done?
I’m assuming that if you set class="col-lg-12" for a <div> this will automatically be the same for medium screens as well as extra small screens etc.
(This probably counts as a second question).
I’ve also copied the entire codepen to my own site, with some minor changes, and it still looks quite awful.
It’s not just my site, I’ve noticed it with other sites with Bootstrap as well.
col-lg-12 is not a class I would use alone as its for really big screens
Responsiveness is working perfectly now when I tested, did you do any changes ?
Remember with bootstrap it adjusts to the size of your browser size so on your laptop you re-size you browser tab and see how everything shrinks and becomes responsive
Maybe if you can send me a link to the exact page of your site that its not responsive, I can help you
@coffecoder, to add on, Chrome and Firefox have mobile/tablet views as basic settings in the dev tool. Also, he could be viewing it with the editor open and not ‘full view’. That caused problems for.
It looks like the framework you are using has set pixel widths. Your class “intro-header” which adds 4rem of margin is causing some issues with padding since it forces the width to be larger than 750px at the medium breakpoint. This might also be the same issue for other breakpoints.
I usually code using the container (or container-fluid) > row > col and put any necessary padding within the col if needed.
Hello @coffecoder ,
the link to the Bootstrap Grid System doesn’t quite explain wether all three classes should be declared. Should they?
my screens are really, really big.
And: the issue is not responsiveness, that’s not the problem! I’m talking about how on phones and small tablets you can sort of ‘slide’ the entire page and move it sideways - i don’t quite know how to call this issue.
@ronbecker : Thank you but no: this is not the case nor is this the issue I’m talking about.
@virtual :
Your reply seems to be actually targeting the issue but I have to think really hard to try to understand it - i’ll have to dive into the CSS again.
Your screens are really big which is great but not everyone’s screen’s are big, people from all different devices are going to be viewing, yeah that’s why we using bootstrap.
See this example they have for all three mobile desktop and tablet.
I would recommend using: (for full width)
putting in all for perfect responsiveness
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- I would normally go for the following: -->
<div class="col-sm-12 col-md-12">
@coffecoder: If you’d use only sm and md classes, what would happen on lg and xs screens?
PS: I’ve solved the weird moving problem myself!
I’ve removed the intro-header margins (thanks to @virtual) and… found out that one word was too long,
namely: my emailaddress…
That’s what was taking up too much space and gave an extra margin outside of its DIV and thus the entire page in mobile view!
So now it’s also behaving correctly on my site: http://www.jirosworld.com
they won’t be as perfect but it will be fine…
play around and test its a good way of learning and discovering …
a way of checking how your site would look on other size screen’s is: I know you can do this in Chrome - Ctrl+Shift+I (inspect the page) then on the left corner you will see an icon of a tablet&phone: toggle device mode click on it and you can view how your page will look on what size screen (you can adjust size)
I use the following code for areas where I know there might be longer items that fall outside of the width of the container, just in case you ever need to add your email back in. It will force the email to wrap instead of extending outside the box:
but I have to think really hard to try to understand it - i’ll have to dive into the CSS again.