I am using Bootstrap on a webpage and am having problems with the rows scaling down to mobile.
The intended effect is for rows separated into 4 equal parts per row scale down to 2 equal divisions per row on Mobile Devices. This works well except for when the device goes below a certain width (approximately 335 px). Below that threshold, the rows get all messed up in some areas where the divisions are not horizontally aligned any longer.
Here is a link to the page so you can see what I mean.
Keep in mind the problem is only on a very small screen size so you will have to shrink your browser window down to < 335px in width.
What exactly is causing this? And how do you think it can be fixed?
For the HTML & CSS please follow the link to www.texasca.com/team.html
The markup and CSS seem to complicated/long to actually put into the question, but let me know if you want me to and I will do so.
Here is an image of the problem:
Thanks guys!
This looks like a float clearing issue. Try adding Bootstraps "clearfix" class to your divs. You can get more information about this issue here http://getbootstrap.com/css/#grid-responsive-resets.
Related
i'm dealing with a weird problem i'm working in my site to try to make a table for movies, the problem comes on the paragraph location, it's position must be in the right part in full screen browser and in left in non full screen browser, how every is not behaving how is should, it das what is has to do only in 90 % zoom of any browser, i try all 4 major browsers , in all it was the same weird stuff.
So the paragraf added after a table only shows in the right side where it has to be in full screen only in the browser is at 90% zoom.
I'm going to add 3 images so i make it more clear :
This is how it looks in non full screen this ok :
This is how it looks in full screen and is not ok since it has to be in the right side :
This is the way it supposed to look like only it shows up like this what if the user has the browser at 90 % zoom !!
How to make it show up in the right side of the user does not have the browser at 90% ?
I try : float:right;
I try : white-space: pre-wrap; using before the paragraph...
i also try top: -400px; it shows up ok in full screen but it overlaps the table in non full screen..
Some please help with this i have never seen something like this..
Need to see some code but I suspect your issue is your total width of the two columns is wider than 100%. You might have the widths explicitly set to total 100%, but maybe you haven't factored in margin, borders, etc, that may make the width wider than the available space, causing the second paragraph to wrap. When you zoom out, you now have "more" than 100% width, which is why it looks right.
Try setting your column widths such that they total 90%... if that works then you need to figure out what's making your columns wider than you expect.
here is the issue I'm running into.
I have a 100% width table that is the grid of a map.
The grid is made of several columns and lines. Every cell hosts an image.
Every image of a column has the same width. And every image of a raw has the same height.
So far, so good...
Everything works like a charm on a desktop.
But on mobile it gets complicated: my cells seem not to have the same height.
For example: all my images of the 1st raw have a 868px height, but there is a padding on some cells (which is different depending the cell).
I added a yellow and green background on the raws that point out this unexpected padding.
Here is the test URL where you can see the problem on mobile: http://jcdecaux.atalanta.fr/plan.php
If anyone can help me... that would be nice.
Thanks in advance!
And if you precise the images dimensions with the width and height tags?
If it doesn't work better try to define their with css and the !important attribute.
style="width: 100px!important; height: 100px!important;"
Otherwise, why do you not using a single image ? you could map it.
Suppose I display thumbnails (~200px width each) in a web page. In a midsize screen (e.g. 15") I can display 5 thumbnails in a row.
Now what if I resize the browser window so that 5 thumbnails don't fit the page width ? I would like the number of thumbnails to be changed automatically to fit the page.
For example: suppose, 5 thumbnails with spaces between them take ~2000 px. Now I am resizing the window. When the page width becomes < 2000 px but > 1600 px. I would like to display 4 thumbnails in a row and so on.
What HTML/CSS markup should I use to achieve that behavior ?
I once made a fiddle to explain media queries to someone. You can use a similar design, although it's usually much simpler just to float:left or display:inline-block your elements and let the browser take care of the rest.
DEMO
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this:
Get the screen size using mediacheck and then set up thresholds using #media.
You can use the float property for this:
float: left;
Floating elements will wrap when they do not fit in the parent's width.
Example (try resizing the page)
This is a follow-up question to one I asked before:
"CSS - elements position when the window size changes".
The issue was - How to avoid the elements from being pushed aside when the screen gets smaller.
The answer was - use static width.
Static width indeed solves the problem, however it causes another problem (now we get to my follow-up question):
Let's say I use a picture as a background for the headline of the site and another one for the footer.
On the one hand I want them to always take the whole screen width but on the other hand I don't want them to be pushed aside when the window displaying the site gets smaller.
Using static width will cause different display in different browsers or in different versions of the same browser - will not always take the whole width. (there isn't one static width value that is good for all cases)
Using width: 100% seems to be the solution but then I find myself where I began.
How can I accomplish both?
Thanks.
This is the reason that we have css media queries and max-width, max-height attributes
Media queries allow you to change the css depending on how big the screen size is. Plus they can do a lot more.
http://www.w3schools.com/css/css_mediatypes.asp
What I would do is design your site with max-width: someamount, and width: 100%. Once your finished, then worry about making it look better on smaller screens.
Designers usually go one of two ways when designing a responsive website. Either design for desktop size screen first, then adjust for the smaller sized screens towards the very end. OR design for mobile sized screens first and then the larger screens towards the very end.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.