There are quite a lot of questions on this subject, but no answer resolved my problem.
I want that for small screens there is no floating around some image. So I have
#media (max-device-width: 639px), (max-width: 639px) {
div.enimage { display: block; clear:both; }
div.enimage img { max-width: 100%; height: auto; border: 0; display: block; clear:both; }
}
for this
<div class="enimage">
<img align="left" border="0" height="192" width="264" src="pic/img2.jpg" />
</div>
<p>Some text.</p>
It does not work, text is still floated right of the image! What am I doing wrong?
Don't use the align attribute. It has been deprecated for 20 years now.
Add float: left to the image's CSS rules and float: none when you want to remove it.
div.enimage img {
float: left;
}
#media (max-device-width: 639px), (max-width: 639px) {
div.enimage img {
float: none;
}
}
<div class="enimage">
<img height="192" width="264" src="pic/img2.jpg">
</div>
<p>Some text.</p>
use display: inline-block; instead of display:block;
div.enimage {
display: inline-block;
clear: both;
}
Related
I would like to place to DIVS (grey & red) inside a DIV (black) under the first DIV (black) when you resize the window and the screen is less than 1024 px. Take a look at the example under. You can also see the image attached.
I would really like som advice here, im totally lost here at the moment.
This is how I want it to be on screens more than 1024px:
<div id="black">
<div id="grey"></div>
<div id="red"></div>
</div>
This is how I want it to be on screens less than 1024 px:
<div id="black"></div>
<div id="grey"></div>
<div id="red"></div>
There is no need to duplicate the content.
#black{background:black;overflow:hidden;}
#grey, #red{
min-height:100px;
margin:2%;
float:left;
width:47%;
}
#grey{background:gray;margin-right:1%}
#red{background:red;margin-left:1%}
#media (min-width:1024px){
#black{padding-top:100px;}
#grey, #red{
float:none;
width:auto;
margin:0;
}
}
<div id="black">
<div id="grey"></div>
<div id="red"></div>
</div>
Sorry, but that is not possible as written.
You cannot move items outside their containing structures using CSS. You can only reformat them within their present structure.
Optionally, you can duplicate the existing black div and show/hide one or the other based on media queries (screen size).
Or, you can use jQuery/javascript to move the DOM items. But CSS alone cannot do this.
Using just CSS (with media queries) and two container <div>s to separate logic:
#media (max-width: 1024px) {
.large { display: none; }
.small { display: block; }
.black { height: 100px; }
}
#media (min-width: 1025px) {
.large { display: block; }
.small { display: none; }
.red, .grey { float: left; }
.black:after { content: ""; display: table; clear: both; }
.red { width: calc(50% - 5px); margin-left: 10px; }
.grey { width: calc(50% - 5px); }
}
.large {
height: 200px;
}
.small {
height: 200px;
}
.black {
background-color: black;=
height: 100px;
padding: 10px;
box-sizing: border-box;
}
.red {
background-color: red;
height: 100px;
}
.grey {
background-color: grey;
height: 100px;
}
<div class="large">
<div class="black">
<div class="grey"></div>
<div class="red"></div>
</div>
</div>
<div class="small">
<div class="black"></div>
<div class="grey"></div>
<div class="red"></div>
</div>
Above snippet better viewed in full page or this codepen
I thought this would be simple but it's proving to be a bit of a headache. I'm trying to get a grid of images to re-center when the user resizes the browser and causes one (or more) of them to wrap onto the next line.
I've tried giving the grid-wrapper display:inline-block; and it's parent a value of text-align: center; but this doesn't re-center the elements when they wrap to a new line. Help appreciated.
For a visual of what I'm trying to achieve view
(source: ianclarke.ca)
.
HTML:
<div class="parent-wrapper">
<div class="child-wrapper">
<!-- Worpress loop to load many thumnails -->
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="project-thumbnail">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<?php endwhile; ?>
</div>
</div>
CSS:
.parent-wrapper
{
width:100%;
text-align: center;
}
.child-wrapper
{
display:inline-block;
}
.project-thumbnail{
float:left;
border:2px solid black;
min-width: 269px;
max-width: 269px;
}
This is the best solution I can think of with CSS only, the magic part is the #media queries. Obviously you'll have to do the math to fit your case.
JsFiddle Demo
body {
margin: 0;
}
.parent-wrapper {
margin: auto;
width: 500px;
padding: 5px 0;
font-size: 0;
}
.child-wrapper {
display: inline-block;
width: 100px;
font-size: 16px;
}
.child-wrapper img {
max-width: 100%;
height: auto;
padding: 5px;
vertical-align: top;
box-sizing: border-box;
}
#media screen and (max-width: 499px) {
.parent-wrapper { width: 400px; }
}
#media screen and (max-width: 399px) {
.parent-wrapper { width: 300px; }
}
#media screen and (max-width: 299px) {
.parent-wrapper { width: 200px; }
}
#media screen and (max-width: 199px) {
.parent-wrapper { width: 100px; }
}
<div class="parent-wrapper">
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
<div class="child-wrapper">
<img src="//dummyimage.com/100" />
</div>
</div>
I found a very similar question with two functional answers. One uses JS and the other uses placeholder elements. Neither are very pretty, but both appear to work around the inline-block whitespace wrap problem here.
Shrink-wrap and center a container for inline-block elements
Have you tried:
.child-wrapper{margin:0 auto;}
So it stays centered? It usually works.
Please add float:left to class .project-thumbnail for the browser breakpoints specific to different browser / screen/device sizes.
.project-thumbnail{
float:left;
border:2px solid black;
min-width: 269px;
max-width: 269px;
}
Add margin: 0, auto; to following class.
.child-wrapper
{
margin: 0, auto;
}
Going through the PHP code I understood that the DIV with the class name .project-thumbnail gets repeated through WHILE loop iterations.
For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this?
HTML
<div class="headDiv">
<div class="headPhone">
<p class="fa fa-phone fa-xlg">000000</p>
</div>
</div><!--headDiv-->
CSS
.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}
#media (max-width: 768px) {
.headDiv .headPhone {float:none; margin: 0 auto;}
}
You could use display:table so the div will shrink to fit the content automatically.
http://jsfiddle.net/Lb7ky6vL/
#media (max-width: 768px) {
.headDiv .headPhone {
float: none;
display: table;
margin: 0 auto;
}
}
The float right was your issue and it sort of overrides the properties of display: block;. I answered this under the impression that you wanted the div to be full width. I added some color for checking.
.headDiv {
display: block;
max-width: 100%;
background: yellow;
}
.headPhone {
float: right;
background: red;
}
#media (max-width: 768px) {
.headDiv .headPhone {
width: auto;
float: none;
margin: 0 auto;
}
}
I have a responsive fluid width website. For one section I have a title, text and an image.
For larger displays I need the title and text to sit to the right of the image. For smaller displays I want a single column with the title first. (see image)
<div class="cont">
<h1>Here is Title</h1>
<div class="img"></div>
<p>Some text</p>
</div>
.cont {
background: grey;
width: 30%;
margin: auto;
}
.img {
height: 200px;
width: 200px;
background: blue;
}
Is this layout possible? For support reasons I cant use flexbox.
http://codepen.io/anon/pen/JoYMoX
I would use your current CSS as default for smaller screens and then use media queries to adjust the layout for larger ones. You may have to use absolute positioning.
For your example:
#media only screen and (min-width: 720px) {
.img {
position: absolute;
top: 0;
left: -200px;
}
.cont {
margin-left: 200px;
position: relative;
}
}
Edit - Alternative Without Absolute Positioning:
As I mentioned in the comments, you could also place the image in the content twice and then simply hide one as needed with media queries. Not ideal, but at least the browser should only download the image once.
So for example:
.cont-wrap {
background: grey;
width: 60%;
margin: auto;
overflow: hidden;
}
.cont {
float: left;
}
.img {
height: 200px;
width: 200px;
background: blue;
}
.left {
display: none;
float: left;
}
#media only screen and (min-width: 720px) {
.img {
display: none;
}
.img.left {
display: block;
}
}
<div class="cont-wrap">
<div class="img left"></div>
<div class="cont">
<h1>Here is Title</h1>
<div class="img"></div>
<p>Some text</p>
</div>
</div>
with bootstrap you can use the offset parametrics, and the pull or push orders.
with the normal css, you can use media query setting position absolute...
#media all and (max-width:768px){
.title{position: absolute;
top:0; left: 0;
OR
width:100%; float:left; ...}
.bluebox{width:100%;
margin-top:20px;}}
I am trying to achieve the following in a two column float css design
My css for the two is this:
.div1 {
width: 25%;
float:left;
}
.div2 {
width: 75%;
float: right;
}
.container {
width:960px;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.container {
width: 100%;
}
}
my html is this:
...
<div class="container">
<div class="div1">
... content inside
</div>
<div class="div2">
<img src="photo_loc"/>
</div>
</div>
I have Div I and Div II. Div I is 25% width and Div II is 75% width. When I go to 320px (iphone portrait) using responsive design Div II goes below Div I, which I assume is the normal process.
What I am trying to do is have Div II above Div I using floats, how can this be achieved through css?
Working Fiddle
.div1 {
width: 25%;
float:left;
background:orange;
}
.div2 {
width:75%;
float: right;
background:red;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.div1{
position:relative;
top:100px;
}
.div2{
position:absolute;
top:0;
height:100px;
}
}
Swap the HTML positions of div1 and div2 around.
It may not be semantically correct in terms of how the page should be layed out but it will still work.
Keep the CSS the same and have your html like this
<div class="div2">Text for box 2</div>
<div class="div1">Text for box 1</div>
Demo: http://jsfiddle.net/u3Ng3/1/