I have two unequal responsive columns, the smaller one on the right is text and the bigger one on the left is an image. When I resize the browser window to see how the columns fit the page, it works fine until it gets to the max width 700px and the column stack onto of each other. The bottom column is fine however the top one (image) doesn't show the full image only a tiny strip going along the width of the page. how can I get it to auto adjust the height to show the full image?
I have tried setting height on the left column as auto but that didn't work and it continued to only show a small strip.
.column {
float: left;
padding: 10px;
height: 300px;
}
.left {
width: 60%;
background-image: url('http://i.imgur.com/k5gf0zz.jpg');
background-size: cover;
background-position: center;
}
.right {
width: 40%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.column {
width: 100%;
}
}
<body>
<div class="row">
<div class="column left";>
</div>
<div class="column right" style="background-color:#FDE4EC;">
<center> <p><font size="8">We Provide Quality Skin Care</font></p>
<p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p>
<br>
<button class="button2"><b>BOOK NOW</b></button> </center>
</div>
</div>
</body>
Any help would be very much appreciated :)
img{
max-width:100%;
height:auto;
display:none;
}
.left {
width: 60%;
background:url("http://i.imgur.com/k5gf0zz.jpg") no-repeat center;
background-size:cover;
}
.right {
width: 40%;
padding: 10px 0px;
}
.row{
display:flex;
flex-wrap:wrap;
}
#media screen and (max-width: 700px) {
.column {
width: 100%;
}
img{
display:block;
}
.left {
background:none;
}
}
<div class="row">
<div class="column left";>
<img src="http://i.imgur.com/k5gf0zz.jpg">
</div>
<div class="column right" style="background-color:#FDE4EC;">
<center> <p><font size="8">We Provide Quality Skin Care</font></p>
<p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p>
<br>
<button class="button2"><b>BOOK NOW</b></button> </center>
</div>
</div>
try adding img to your html with max-width:100% and height:auto for small screens and div with background for large screens!
Remove height and add min-height
.left {
min-height: auto;
}
Thanks for your topic, I agree with Chris, if we could have more info it'd be easier to know how to help.
you can also use something like this in your html file, two pics with different sizes and to use a specific pic for every page size.
<picture id="pic">
<source media="(min-width: 650px)" srcset="image.jpg">
<img src="image2.jpg" alt="same pic bigger size" style="width:auto;">
</picture>
Related
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I want to have three images on a row, if the total width of these three images doesn't fit the browser window then all three images should be below each other. So it's "all or nothing", there should never be only two images beside each other and one below (this happens then you gradually decrease browser window width using float:left; on all three images)
All this should be centered in the browser window, no matter the size of the window.
I know limited CSS and HTML but am using the following code to get current data centered in the window:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
table {
vertical-align: middle;
height: 100%;
margin: 0 auto;
}
<table>
<tr>
<td>
<table width="280" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
"images and text"
</td>
</tr>
</table>
</td>
</tr>
</table>
You can use bootstrap to achieve that. Click on the Full page button and change the screen size.
#media (min-width:768px) {
.inline-block-row .col-sm-4 {
display: inline-block;
float:none;
}
}
<body>
<div class="container-fluid">
<h1>Inline Block Grid</h1>
<div class="row inline-block-row">
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
</div>
</div>
</body>
You can use media queries (simple +pure css), but you need to set a breakpoint (unflexible):
img{display:inline;}
//replace 1024 with width of all three images
#media (max-width:1024px){
img{display:inline-block;}
}
Or you could use js (flexible+complicated):
<script>
body.onresize=function(){
var width=0;
images=document.getElementsByTagName("image");
for(image in images){
width=width+image.width;
}
if(width>window.innerWidth){
document.all.img.style.display="inline-block";
}
}
</script>
We can use pure CSS only to solve that problem, we'll use CSS media query. I'll try to explain the solution with help of an example. For that, first you should have with you the width of each image.
For example, let's say width of one image you want is 200px, then also you'd like to have some space as margin between images too, so let's say if browser width is more than 700px, then we'll have images on the same row, else, we'll have them one below the other. See the code below for one such implementation.
The HTML can be like this:
<div class="container">
<img src="img/one.jpg">
<img src="img/two.jpg">
<img src="img/tri.jpg">
</div>
The CSS code will be as below:
.container
{
width:100%;
text-align:center;
}
.container img
{
display:inline-block;
width:200px;
margin:15px;
}
/*Next block will be followed when browser width is less than 700px*/
#media screen and (max-width:700px)
{
.container img
{
display:block;
margin:auto;
width:100%; /*Use this line only if you want the image to occupy full width*/
}
}
If you know the width of the image you can add a #media query which changes both the width of the container and the flex-direction from row to column.
eg. Take an img which is contained in a div - and all the divs are collectively contained in a section.
If the image has a width of 240px, and a margin of 20px (on both sides) and the div containing the image has a 2px border (on both sides) and a 24px margin (on both sides), then...
a section containing three divs has a width of:
3 * (24px + 2px + 20px + 240px + 20px + 2px + 24px) = 996px
If you then style the body of your document so it has:
body {
margin: 12px;
padding: 0;
}
you'll know that the point at which the row of images has to turn into a column of images is when the width of the body is less than 12px + 996px + 12px - or 1020px.
Then you can set up your #media query:
#media only screen and (max-width: 1020px) {
.set {
flex-direction: column;
width: 332px;
}
}
Full example:
body {
margin: 12px;
padding: 0;
}
.set {
display: flex;
flex-direction: row;
width: 996px;
margin: 0 auto;
background-color: rgb(227,227,227);
}
.set-item, .set-item-image {
display: block;
}
.set-item {
width: 280px;
height: 320px;
margin: 24px;
background-color: rgb(255,255,255);
border: 2px solid rgb(191,191,191);
}
.set-item-image {
width: 240px;
height: 240px;
margin: 20px 20px 8px;
background-color: rgb(191,191,191);
}
.set-item-text {
margin: 0;
padding: 0;
text-align: center;
}
#media only screen and (max-width: 1020px) {
.set {
flex-direction: column;
width: 332px;
}
}
<section class="set">
<div class="set-item">
<img class="set-item-image" alt="Image 1" />
<p class="set-item-text">Image 1</p>
</div>
<div class="set-item">
<img class="set-item-image" alt="Image 2" />
<p class="set-item-text">Image 2</p>
</div>
<div class="set-item">
<img class="set-item-image" alt="Image 3" />
<p class="set-item-text">Image 3</p>
</div>
</section>
I have a Wordpress site. I have altered the footer to contain five divs with images in them.
This is the html code for the footer:
<footer class="site-footer">
<div class="table">
<div class="logo-gallery">
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div>
<div class="logo">
<img src="image_url">
</div><!-- .logo -->
</div><!-- .logo-gallery -->
</div><!-- .table -->
</footer>
For css I came up with this:
/* Footer */
.site-footer {
background-color: #e8e5ce;
/*min-height: 180px;*/
}
.site-footer .table {
display: table;
width: 80%;
margin: 0 auto;
}
.site-footer .logo-gallery {
display: table-row;
}
.site-footer .logo {
display: table-cell;
}
On a desktop computer the images now show as I would like them to:
1. they take up to 80% of the width (so that they are closer to eachother)
2. they are (as a group) placed at the center of the screen horizontally.
I want to make the images fit a smaller screen (a cell phone or tablet) - right now I get a horizontal scroll bar when I try to downsize the browser window and the images are beyong the right edge of the window (I haven't checked this code with a phone yet).
On the smaller screen I would like them either to get smaller to fit the width (all five) or appear underneath eachother (with the background color stretched underneath).
I also have a second version of css. Here, the problem is that the images clump up when downsizing the browser window (and also on the phone: check here: http://npozp.pl/)
/* Footer */
.site-footer {
background-color: #e8e5ce;
min-height: 180px;
}
.site-footer .logo-gallery {
margin: auto;
width: 70%;
}
.site-footer .logo {
float: left;
width: 20%;
height: auto;
padding: 30px 15px;
}
I am looking for a way to do this, it can be one of the above codes fix or please suggest an approach that I could take.
Thanks for reading! :-)
Please consider using media queries so that you can manipulate your layout using the pixel size of the device.
Your css adjustments should look like:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.site-footer .logo {
width: 100%;
}
}
As you can see the mix and max device width values can be changed and you can add multiple media queries to get the best out of your layout.
Learning my way through this...
I'm working toward setting up rows of divs - I don't want any space between them and am not sure what properties to look for to adjust as the width changes.
I'm getting either a 1px gap appearing/disappearing as the images scale, or getting one of the divs bumped down to the next line.
The odd thing is that both rows are basically the same, so I'm lost here.
Here's the current page:
http://www.turnerdesign.com/brackets/
thanks
Andrew
To lose the gaps:
Remove the height: auto; and set a height.
#media screen and (max-width: 959px)
#column700 {
width: 73%;
height: 50px;
float: left;
}
/* Do the same for the other column */
}
For gaps:
(I wrote this first, then re-read the question and was like, OMG I did a whole answer for another question as I didn't understand it at first, but just incase someone needs gaps, here's how)
HTML:
<div class="column700">
<div id="firstProject">
</div>
</div>
CSS:
#firstProject {
width: 100%;
padding: 10px;
background: blue;
}
You have multiple elements with the same id on your page. If you want to add the same style to many elements, use class.
Add style="clear: left;" to the div containing image with a canyon.
Please use this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#image {
display: block
}
#container{
width: 960px;
margin: 0px auto;
}
#header{
width:100%;
height:auto;
margin-bottom: 0px;
float: left;
line-height: 0;
}
#name{
height:50px;
background:none;
width:300px;
float: left;
line-height: 0;
vertical-align: top;
}
#contact{
height:30px;
background:none;
width:auto;
float: right;
line-height: 0;
}
.image-container{
vertical-align: top;
width: auto;
height:auto;
background:#296db1;
background-size: cover;
line-height:0;
}
.div-left{
float: left;
}
#media screen and (max-width:959px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
#media screen and (max-width:640px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
#media screen and (max-width:320px){
.image-container{
float:left;
}
#container{
width: 100%
}
.image-container{
width: 320px;
}
img {
width: 100%;
height:auto;
}
}
.row2{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="name">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Title | Description</p>
</div>
<div id="contact">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Menu</p>
</div>
<div id="header">
<img src="http://www.turnerdesign.com/brackets/images/banner.jpg" block;="" style="display:">
</div>
<div class="row-container">
<!--row 1-->
<div class="row row1">
<div class="image-container div-left" id="column700">
<img src="http://www.turnerdesign.com/brackets/images/blake.jpg">
</div>
<div class="image-container" id="column260">
<img src="http://www.turnerdesign.com/brackets/images/canyonmap.jpg">
</div>
</div>
<!--row 2-->
<div class="row row2">
<div class="image-container div-left" id="column260" style="">
<img src="http://www.turnerdesign.com/brackets/images/canyon.jpg">
</div>
<div class="image-container" id="column700">
<img src="http://www.turnerdesign.com/brackets/images/warrior.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
You can also see the - jsfiddle.net demo link.
You can always think about optimizing the code further:
Optimize / minimize the number of css lines in each media-query.
Manage img parameters more smartly for all media queries.
Restructure the HTML so it becomes more manageable.
Your problem doesn't actually come from the widths applied to your divs, but because of the heights of images.
what is happening here is that in your second row, you have one 700x100 image followed by a 260x100 image. Their ratios aren't the same, so you can understand that commanding their widths will have different effects on their respective heights.
In the end, at some window width, you end up with 1px difference between your images' heights (most often the first one being higher). That causes the 3rd row to actually be pushed to the right, since it has a 1px height to fill first. However, there is only enough room for the smaller image, so the browser breaks a new line for the bigger one.
Solutions:
put a clear: left; on every image at the start of a new line. It will solve this problem, but the 1px height difference will still be there and a white line between your smaller image and the next line will appear.
PS: i'll edit this post if i find better solutions.
I'm making a website for my course in webdesign and one criteria is for it to be responsive (resize content to fit screen size).
So in my site as it is every image and text paragraph size according to screen sizes from full HD to iPhone size.. except for my header image which just stays locked in its place when I scale it down, so when it's down to mobile resolution I have to scroll to the right to see my image.
Here's my HTML and CSS codes for the header image:
HTML:
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="images/logo2.png"></p>
</a>
</div>
</div>
CSS:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
Link to my code with a random same size images.. http://jsfiddle.net/hac4cfrn/
If you want it to be responsive and centered, you should set the .container_14 with to 100%, not hardcode it in pixels:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"></p>
</a>
</div>
</div>
If you want the .container_14 to adapt to various screens but stay at 1200px width if there’s enough space, then use a #media query:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
#media screen and (max-width:1200px){
.container_14 {
width: 100%;
}
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
<header>
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"> </p>
</a>
</div>
</div>
</header>
You can also add a second #media query for the image inside. It’s also possible without the container.
Otherwise you could just use 100% as a width.