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.
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'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 am building a site built of a wordpress responsive theme as the parent. I have a content section (content-blog) on the left side of the page and a sidebar (widgets) on the right side of the page. I have them set to scale down with the browser size, However I would like to set a min-width to both so that they don't scrunch up on smaller browsers. I want the sidebar to move underneath the main content at a certain width point. Here are my html and css.
HTML:
<body>
<div id="header">
/* content */
</div> <!-- end header -->
<div id="container" class="hfeed">
<div id="navigation">
/*content */
</div> <!-- end navigation -->
<div id="feature">
/* content */
</div> <!-- end feature -->
<div id="wrapper" class="clearfix">
<div id="content-blog" class="grid col-620">
/*content */
</div> <!-- end content-blog -->
<div id="widgets" class="grid col-300 fit">
/* content */
</div> <!--end widgets -->
</div> <!-- end wrapper -->
<div id="footer"
/* content */
</div> <!--end of footer- -->
</body>
CSS:
body {
background: none repeat scroll 0 0 #2D2C2A;
color: #2D2C2A;
}
#container {
max-width: 1100px;
margin: auto;
margin-top: 15px
}
#wrapper {
max-width: 1010px;
width: 100%
margin: auto;
margin-top: 15px;
border: none;
}
#content-blog {
margin-bottom: 20px;
margin-top: 16px;
max-width: 65%;
min-width: 45%;
width: auto;
}
#widgets {
float: right;
margin-top: 40px;
max-width: 32%;
width: auto;
}
The site is podcastanswers.com if that helps also. I have tried setting a min-width but no matter what as the browser scales down the divs continue to get smaller and never stop at the min setting. I'm sure it something that I have missed or am not understanding but I haven't been able to find the answer in my searching. Thank you all in advance.
The percentage metric is relative to the current size of the screen, not the one that was set when the browser loaded the page. So whenever you resize the screen, the min-width/max-width values change as well (not sure if this is exactly your issue since the example was rather lengthy) but, it seems like you are trying to make a responsive design and therefore you should use media-queries. An example code of media queries:
#media screen and (max-width: 1040px) and (min-width: 100px) {
#content {
width: 100%;
}
}
Here are some resources that will help you understand and use them:
CSS-Tricks
Spec
MDN
I am trying to left align my logo and right align my navigation. I am using the "skeleton" boilerplate for a responsive page.
The logo and nav wont stay on the same "line" when I float my Nav right. I removed the float right rule from the CSS before adding it to this example.
Here is some of the CSS I'm using and where i think the problem my be and the rest is listed here
.nav {
margin: 0px;
padding: 0px;
white-space: nowrap;
list-style-type: none;
}
.logo {
}
.nav li {
display:inline;
}
.nav li a {
padding:0.2em 1em;
background:#;
color:#000;
text-decoration:none;
border:0px solid #000;
}
.nav li a hover{
background:#08c;
color:#fff;
}
You're missing the alpha and omega classes that remove the margin from the left and right elements respectively.
The HTML should look like this:
<div class="header">
<div class="two-thirds column alpha">
<div class="logo"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQNGEBMvQ55sHEC0xWxvpkyW-H_ZylS9Fk5ktg3OLKLS3w6yCr29w" width="47" height="36"></div>
</div>
<div class="one-third column omega">
<div class="nav">
<ul><li>hire</li><li>Bio</li><li>Contact</li><li>blog</li></ul>
</div>
</div>
Here's a Code Pen with the example code: http://cdpn.io/rHBio
EDIT
To explain further (even after the downvote #bitter).
The reason you have the navigation on two separate lines is because after the following media query the container and all of the columns are set to 300px.
#media only screen and (max-width: 767px) {
.container { width: 300px; }}
There is another media query that overrides that one for any devices between 480px and 767px and gives a width of 420px.
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
Because the classes used, two-thirds and one-third, are now set to either 420px or 300px there they take up the entire row (they become stacked/linear).
To override this and have them on the same line you will need to target those elements through additional CSS rules to reduce their width to 100/200px or 120/300px to fit in with the media queries.