I am working on a full page foundation 5 site that will work on mobile. Everything is going fine except for one issue.
HTML and CSS
<div class="row collapse" id="banners">
<div id="cityView" class="large-6 columns small-6 columns">
<img data-interchange="[images/voip_site_top_img_box_left_2014_small.jpg, (default)], [images/voip_site_top_img_box_left_2014.jpg, (large)]">
</div>
<div id="cityOrange" class="large-6 columns small-6 columns">
<img data-interchange="[images/vi_site_top_img_right_2014_small.jpg, (default)], [images/vi_site_top_img_right_2014.jpg, (large)]">
</div>
</div><!--End Row-->
<div class="row" id="information">
<div id="informationContent" class="large-12 columns">
Content
</div>
#banners{
}
#cityView{
height:inherit;
}
#cityView img{
width:100%;
padding-bottom:1px;
}
#cityOrange{
height:inherit;
}
#cityOrange img{
width:100%;
}
When I load this in my browser, the image on the right gets re sized and becomes a few pixels smaller then the image on the left.
I cant recreate it in jsFiddle so here is a screenshot
I cant just set the size in the CSS because then on the mobile version the images retain that and are way too large. How can I fix this?
This is happening because the images are not the same width.
In your HTML/CSS, both images are contained within equal width fluid containers (e.g. the classes large-6 columns). This means that no matter the viewport width, those two six column containers will ALWAYS be the same size (e.g. 50% of viewport).
In your comment you said "The image on the left is 949 x 362 and the image on the left is 971 x 362". Since the images scale proportionally to fit their container (max-width: 100%), they must be the same width or they will not scale at the same rate because the ratio of image width to container width will be different for each image.
The solution is to cut the images to be the same size (e.g. combine them and then cut that in half so they both have the same width, likely 960px) so that they scale at the exact same rate (e.g. ratio of image width to container width is identical).
I hope that makes sense. It may be a little confusing to wrap your head around but this is a pretty crucial core concept when it comes to RWD.
Related
I am trying to make 2 columns with an image in each and although the 2 images are the exact same size, I noticed that they have uneven right/left margins, the left one is slightly larger, how can I fix this?
HTML:
<div class="container">
<div class="row">
<div class="col col-lg-6">
<img src="logo.jpg">
</div>
<div class="col col-lg-6">
<img src="profile.jpg">
</div>
</div>
</div>
CSS:
.container img {
width: 35em;
height: 35em;
}
It is because you have applied width to the img tag. you can fix this by setting the width to 100%.
when image size is larger than the width of the div image overflow. And the div tag that contain the img tag, have left and right padding. if the image's width is larger than div width image will overflow. and even if you set overflow to hidden image will show to the innerWidth of the div.
Making the img width 100% will make the image remain in the div.
Hope this solves your problem.
Since I don't have enough reputation to comment, I will answer your question that you asked in the comment section below HasithaC's answer.
First of all, like what HasithaC said, give your image a width: 100% so that the image will remain in the div.
You mentioned in the comment that the images don't stack on top of each other when resized. It's because you inserted col alongside with col-lg-6. col-lg-6 stands for "column-large-6", which will create 6 columns layout when the screen size is 992px or above. If the col classes weren't alongside with col-lg-6 in the first place, the images (columns to be exact) will stack on top of each other when the screen size is below 992px,1 but the col class is there, so it will then take over to style your div when the screen size is 992px below as col-lg-6 is meant for 992px or above. Moreover, col has a flex-grow: 1. According to CSS-Trick:
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.
You have two col in the same row and both of them have flex-grow: 1, so they will have the same width, but they won't stack on top of each other because there are no media queries controlling it, unlike col-lg-6 which is only meant for screen size 992px or above. Remove col will solve the problem.
Jsfiddle example
This is visual demonstration: Image
I'm trying to put in my laptop column(col-md-8) second column, but when I try, the other one went under the column of the laptop, how can I put a second(col-md-6)column inside a laptop column, and that column laptop still has its full size.
Do you want like this? It's a very short and a messy description you have. So I hope i'm right.
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
Laptop Image
</div>
</div>
</div>
</div>
"col-md-8 col-sm-12" classes will keep your column content as you like in tablet view+desktop view but when it becomes smaller like smartphone view, it will expand to the column to full width and you will still able to see your stuff inside of the laptop column.
Please read the bootstrap documentation from here. Anything else you want quick google will fix your issues or we're here at stackoverflow to help you out. :)
Update
This is what you want isn't it?
https://jsfiddle.net/5jrt314r/2/
Now Whatever goes inside of that .inside class will depend on the laptop image size you have. It will automatically horizontally and vertically center based on the .laptop class you have.
You said you want it responsive so you have to:
Keep your laptop element aspect ratio the same as the image.
Have a screen element that will always fill laptop's screen even if laptop image size changes due to it filling parent element.
If I am right you want this:
HTML:
<div class="row">
<div class="col-xs-8 laptop">
<div class="row">
<div class="col-xs-offset-3 col-xs-9 screen">
This column need to go in laptop screen
</div>
</div>
</div>
</div>
CSS:
.laptop {
background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
background-size: 100%;
background-repeat: no-repeat;
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
padding-bottom: 89.32%;
}
.screen {
background: red;
/* Make sure this element is always the size of the screen */
padding-bottom: 64%;
}
I calculated image aspect ratio to be 89.32~% by dividing width by height which is respectively 2084px and 2333px.
Here is a codepen example http://codepen.io/anon/pen/aNqKZL
UPDATE
In the first example .screen element would go beyond laptop screen because of it being stretched by it's content. Here is a version that deals with it http://codepen.io/anon/pen/qZxKRo
I'm using Materialize framework and I'm interested in the Cards component (The small version).
The code goes like: (the small class limits the height of the card to 300px)
<div class="card small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
Here's what I want to achieve:
The image must be in the center of its parent
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
If it's larger than the cards width then it should be cropped to fit the card
It should be responsive (using responsive-img class)
The image must be in the center of its parent
This can be achieved by applying margin: 0 auto; to .card-image and setting a max-width that is smaller than the max-width of .card.
If the image has a width that's smaller that the cards width, then it
should be used with it's full width in the card
Does this mean the image should not be larger than its original size? If so the demo below should fulfill the criteria. .card-image is set to have a max-width of 400px and .responsive-img has a width of 350px.
If it's larger than the cards width then it should be cropped to fit
the card
This can be achieved by setting overflow: hidden; to .card-image.
It should be responsive (using responsive-img class)
The demo below uses .responsive-img on the image. To center the image even when it's cropped, you may set top, bottom, left, right values to -100% and margin to auto. Be sure to set .card-image to position relative and .responsive-img to absolute.
Here's a demo:
https://jsfiddle.net/suefeng/updr2ehp/1/
If you resize the window, the image should crop when the window is narrower. The image is 350x300px.
Linked a jsFiddle with examples. Hope this helps.
If it's larger than the cards width then it should be cropped to fit the card
When you specify the card-small, the height will be constrained. To modify the width, you just need to specify the number of columns to use.
<div class="col s6">
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
Some images that are too small will be distorted, see the third example with a jpg in the jsFiddle.
It should be responsive (using responsive-img class)
The responsive features baked into Materialize should provide you with some features, for example in second card.
<img src="any.jpg" alt="" class="circle responsive-img">
I would like the right side of the column to be set to a fixed size of 400px wide while the left hand portion is 100% of the difference.
Current code:
<div class="container-fluid fill">
<div class="row">
<div id="leftpanel" class="col-md-8">
</div>
<div id="rightpanel" class="col-md-4">
</div>
</div>
How would I go about doing this with Bootstrap?
Not only with bootstrap but even with nay CSS trick it is something tough to set a column fixed width in Pixels and rest one is 100% of the rest portion of screen because each device have different resolution. Still if you want to achieve this than you should look at the calc() function of css. Though it is not supported by all modern browser but would be helpful to you.
I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width