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.
Related
I have images inside an html article that is set to columns using a fixed column-width attribute on containing div.
I've added srcset for reponsive images which works fine except it loads the largest image based on the width of the containing div not a smaller image based on the width of the columns.
In some cases the article is displayed without columns so I was hoping the same image srcset can cater for both situations. Is there any way to make srcset select the smaller sized image when its showing the content in fixed with columns?
For lack of responses, I came up with wrapping div around the images so the div scales to the column and srcset picks image is selected based on the wrapper rather than the full div. If anyone has a better solution please share.
Update: Doesn't work as srcset looks at the viewport not the wrapping div. One way to solve this might be to just use 30vw in sizes if its in multicolumn or calculate the number of columns using the width of containing div and use that value as the vw amount in sizes.
I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images.
Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.
My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...).
I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?
Thanks.
You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.
When adding an new image, choose a class that fit your need.
If you need more precision, create a set of 10 class instead of 5 !
Edit : as promised, the code :
.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}
So the image :
<img class="size2" src="..." />
will be 20% wide.
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.
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.
I'm writing a small program on the iPad whose task is to display the contents of an html file. I use document.documentElement.scrollHeight (pageYOffset etc.) to paginate.
My problem is with images. Sometimes an image gets cut in half such that 50% of the image is on page 1 the other 50% is on page 2. How can I fix this?
Thanks.
Why not style your images with CSS and use a percentage value so that it scales to fit the screen?
You might also want to checkout Responsive Design.