I have a webpage with 2 columns with a width of 50% and a minimum width of 500px. Now what I want to know is how to get them to resize so that when the 2nd column repositions to underneath the first, the first column resizes to fill the entire page. I can't get my head around it and any help would be much appreciated. Below is the basic code:
html:
<div class="column">
<div id="item-1">
##
</div>
</div>
<div class="column">
<div id="item-2">
##
</div>
</div>
css:
.column{
width:50%;
min-width:500px;
float:left;
}
CSS3 media queries
#media screen and (max-width: 1000px) {
.column { width: 100%; float: none; }
}
Tweak that and you should get what you want.
You can do that with a media query:
#media all and (max-width:1000px) {
.column {width:100%;}
}
Related
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>
I am following the tutorial from W3Schools on "How TO - Align Images Side By Side", located at https://www.w3schools.com/howto/howto_css_images_side_by_side.asp
I have the following div class called column, and I am trying to resize it when the width of the screen changes, in order to adapt in different screen sizes on mobile and desktop.
The HTML code is as follows:
<div class="row">
<div class="column">
<img id="firstImage" style="width: 100%">
<figcaption id="firstCaption"></figcaption>
</div>
<div class="column">
<img id="secondImage" style="width: 100%">
<figcaption id="secondCaption"</figcaption>
</div>
<div class="column">
<img id="thirdImage" style="width: 100%">
<figcaption id="thirdCaption"></figcaption>
</div>
</div>
On desktop (default) mode, the three images are listed in a row, like so: https://i.imgur.com/a/zg2j5rv.png
This is defined by the following CSS code:
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
But when the width of the screen reaches 768px or less (mobile screen), I intend for the images to be listed vertically, so that the images are listed on above and below one another. I have added the following CSS code to style this change:
#media only screen and (max-width: 768px) {
[class="column"] {
display: block;
width: 100%;
}
}
In the above code, my logic is to make each column div listed in block form, with its width spanning across the entire width of the screen. That way, each div would be pushed to a new line while the div spans the entire width. However, when I do resize the screen, the images remain in a horizontal row, as they are squeezed together as 3 images in a row.
Any ideas on how I can get each column div to move to a new line when the width of the screen decreased? Any help is greatly appreciated!
[class="column"] selector does not override .column selector, even if placed later in code, because it's an attribute selector and has lower specificity than class selector. 1
You should use .column inside the #media query as well. Note [class="stuff"] is a far worse selector than .stuff because it will stop working the moment you add a new class to the same element.
This should work:
.column {
float: left;
width: 33.33%;
padding: 5px;
}
#media only screen and (max-width: 768px) {
.column {
display: block;
width: 100%;
}
}
1 I've just tested (to make sure my answer is correct) and it appears both Chrome and Firefox are smart enough nowadays to recognize the fact that, even if [class="column"] is an attribute type selector, because it refers the class attribute they give it the proper class specificity. However, the second argument (that it stops working as a selector when another class is added to the element) is still valid.
Try this. This is for a three column layout but you should be able to change percentages if needed.
.col-container {
display: table;
width: 100%;
}
.imagegroup {
width: 100%;
background-color: #ffffff;
}
.img-container {
display: table;
float: left;
width: 33.3%;
}
#media only screen and (max-width: 500px) {
.img-container {
display: table;
float: left;
width: 100%;
}
}
<div class="imagegroup">
<div class="col-container">
<div class="img-container">
<p>Image 1 goes here</p>
</div>
<div class="img-container">
<p>Image 2 goes here</p>
</div>
<div class="img-container">
<p>Image 3 goes here</p>
</div>
</div>
</div>
They should now stack.
UPDATE
Just click the full screen link for the code and then resize the window. Anything within those DIVs will stack on top of each other.
I want have a responsive page whereby if the screen is large enough, my login images are displayed on one line, otherwise, they are displayed across two lines. So I have this HTML
<div id="loginBox">
<div>Login/Sign Up</div>
<div id="loginLogos">
<div id="row1">
<img border="0" alt="Google" src="http://www.racertracks.com/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg">
<img border="0" alt="Facebook" src="http://www.racertracks.com/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png">
</div>
<div id="row2">
<img border="0" alt="Twitter" src="http://www.racertracks.com/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png">
<img border="0" alt="LinkedIn" src="http://www.racertracks.com/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png">
</div>
</div>
</div>
and then I used the media-query to attempt to do what I wanted …
#one {
float:left;
}
#media screen and (max-width: 400px) {
#one {
float: none;
}
}
However, at a normal screen size, the images are falling into two rows instead of one — https://jsfiddle.net/ocdz4bsp/ . For small screens, they are correctly wrapping into two rows. How do I keep everything on one line for screen sizes over 400 pixels?
You really don't need any media queries to achieve the effect you're after. By using floats properly, the items will stack themselves when need be. See here
#row1, #row2 {
float:left;
}
#row1 {
margin-right: 5px;
}
If you were set on #media queries, then you could do the following:
#row1, #row2 {
float:left;
}
#row1 {
margin-right: 5px;
}
#media only screen and (max-width: 400px) {
#row1, #row2 {
float: none;
margin-right: none;
}
}
If you want 2 elements to be side by side, use display: inline-block If you want them to stack on top of each other use display: block
Here is the corrected fiddle: https://jsfiddle.net/ocdz4bsp/1/
Hope this helps.
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.
I'm trying to create a layout with 3 columns when over 1440px, and two columns from 800px to 1440px - the media queries I've got are working fine, however the problem is trying to get the cols to align vertically:
Screen shot http://pichut.eu/x/Screen_Shot_2013-10-13_at_10.png
As you can see the third col when collapsed aligns left, however it sits bellow the end of the first column, but I would prefer if it were aligned with the bottom of the first! (make sense? :L)
Here's the HTML for the cols:
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
And here's the CSS i've got for the page...
/*=================================================
Dynamic Cols
=================================================*/
.dyn-col {
width: 100%;
display: block;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box
-moz-box-sizing: border-box
}
#media screen and (max-width: 800px) {
.dyn-col {
width: 100% !important;
}
}
#media screen and (min-width: 801px) and (max-width: 1439px) {
.dyn-col {
width: 50% !important;
float: left;
}
.dyn-col:last-child {
}
}
#media screen and (min-width: 1440px) {
.dyn-col {
width: 33.3% !important;
}
}
Would recommend using bootstrap 3 makes life easier when doing stuff like that I use it alot.