I am making a comment section for my project and I've added display: none to answear__avatar on max-width: 980px and after that those divs are overlaping each other. How do I stop them from overlapping?
Here's my code:
.answear__wraper {
margin-bottom: 10px; }
.answear__answear, .answear__answear--dissucsion {
position: relative;
height: 100%; }
.answear__answear {
width: 100%; }
.answear__answear--dissucsion {
width: 89.4%;
float: right;
}
#media screen and (max-width: 980px) {
.answear__answear--dissucsion {
width: 95%; } }
.answear__avatar {
display: inline-block;
width: 100px;
height: 100%;
}
#media screen and (max-width: 980px) {
.answear__avatar {
display: none; } }
.answear__content {
text-align: left;
position: absolute;
}
<div class="answear_container">
<div class="answear__wraper">
<div class="answear__answear">
<div class="answear__avatar"><img src="images/user0.jpg" class="image__lg" /></div>
<div class="answear__content">
<div class="answear__user">
</div>
</div>
</div>
<div class="answear__answear--dissucsion">
<div class="answear__avatar"><img src="images/user0.jpg" class="image__lg" /></div>
<div class="answear__content">
<div class="answear__user">
</div>
</div>
</div>
</div>
</div>
Use visibility: hidden; the element will still take up the same space as before. The element will be hidden, but still affect the layout.
By using display: none; the page will be displayed as if the element is not there.
Related
I'm having some issues getting an SVG to play well in the layout that I have written. Here is the example I have for the working table-cell layout that I have been working on. The first jsfiddle links to the working example. When I replace the text on the left with an SVG for some reason, the content on the right column gets pushed down. Any idea why?
working example
broken example
Working Example HTML:
<div id="wrapper">
<div id="row">
<div id="left-col">
There are many variations of passages of Lorem Ipsum available
</div>
<div id="right_col">
<aside><strong>ASIDE</strong></aside>
<div id="banner1">Banner 1</div>
</div>
</div>
Broken Example HTML:
<div id="wrapper">
<div id="row">
<div id="left-col">
<div id="divMapContainer" class="embed-responsive embed-responsive-1by1">
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect>
</svg>
</div>
</div>
<div id="right_col">
<aside><strong>ASIDE</strong></aside>
<div id="banner1">Banner 1</div>
</div>
</div>
CSS:
body {
background-color: #333;
margin: 1em;
}
#wrapper {
width: 100%;
max-width: 46em;
margin: 0 auto;
}
#media (min-width: 48em) {
/* 768px */
#wrapper {
display: table;
}
header {
display: table-header-group;
}
nav,
#banner2 {
display: block;
}
#row {
/* the rule below is redundant
thanks to SelenlT2
*/
/*display: table-cell;*/
}
#left-col,
#right_col {
display: table-cell;
}
#left-col {
width: 50%;
}
footer {
display: table-footer-group;
}
}
#banner1 {
background-color: #9ed6f9;
height: 50%;
}
#left-col,
#right_col {
background-color: #fff;
}
#right_col {
height: 100%;
}
aside {
background-color: #fbcdfa;
height: 50%;
}
#left-col,
aside {
text-align: left;
padding: .5em;
}
nav,
header,
#banner1,
#banner2,
footer {
text-align: center;
}
.note {
color: #fff;
text-align: center;
}
It's because SVG elements are inline by default. You can set the vertical-align property on your SVG so that the other elements will align to the top of it. See updated fiddle.
svg {
vertical-align: top;
}
I am attempting to place an iframe and img inline in a div. The code that I have posted puts the img below the iframe. I have tried to position and float the elements but nothing seems to work. I have also checked out other posts on SO, but nothing seems to work. I am willing to start from scratch if required.
I would be grateful if someone could point out my error and show me the corrections to make to get this to work. I have looked at other posts but nothing seems to be working.
Thank you.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
The problem
The issue is that .inner has a width of 49% which is pushing the image onto a new line. This can be seen if you add a background color and height to .inner.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
background-color: red;
height: 100px;
}
.holder {
height: 0px;
width: 100%;
}
iframe {
opacity: 0.5;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
How to fix
Option 1
Add whitespace: nowrap; to .holder to stop the image from being able to wrap onto the next line
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
white-space: nowrap;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
Option 2
Set a larger width on .inner.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 100%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
I have following layout
<div class="post-short-content">
<div class="entry-thumb"></div>
<div class="entry-post"></div>
</div>
CSS
.post-short-content {
width: 100%;
height: 100%;
overflow: hidden;
}
.post-short-content .entry-thumb {
width: 30%;
}
.post-short-content > div {
float: left;
}
.post-short-content .entry-post {
width: 70%;
}
And for responsive layout
#media only screen and (max-width: 768px) {
.post-short-content .entry-post,
.entry-header {
padding : 0;
}
.post-short-content > div {
clear: both;
float: none;
width: 100% !important;
}
.post-short-content .entry-thumb {
text-align: center;
}
.post-short-content .entry-post {
margin-top: 0.8em;
}
}
And now it looks like this
But the problem is that, in case of no image text also takes 70% from div space like this
Is it possible using only CSS make text take 100% of width if there is no image ?
UPDATE
Sorry for forgetting to mention, that I am not allowed to use flex, because this site will be used on mobile devices.
With a bit of mixing and matching of width and flex, then yes. Be sure to run your flex rules through autoprefixer for cross browser support.
.post-short-content {
width: 100%;
height: 100%;
display:flex;
}
.post-short-content .entry-thumb span {
width: 30%;
background:lightBlue;
}
.post-short-content > div {
display:block;
height:3em;
}
.post-short-content .entry-post {
min-width:70%;
flex:1 0 auto;
background:Gray;
}
<div class="post-short-content">
<div class="entry-thumb">
<span>Faux Image</span>
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
<div class="post-short-content">
<div class="entry-thumb">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
https://jsfiddle.net/cmckay/jd0vxh3m/
http://autoprefixer.github.io/
Here is the flexbox way - very short and to the point:
https://jsfiddle.net/mu3vo6vh/1/
markup same as below
styles
.image-w img { /* responsive image wrapper */
display: block;
width: 100%;
height: auto;
}
.flex-example {
display: flex; /* children will stretch deal with the space accordingly */
align-items: center; /* for vertical align */
}
.image-w {
min-width: 200px; /* try regular width and see what happens */
margin-right: 1rem
}
This is the regular way with classic float
https://jsfiddle.net/mjmbm021/
markup
<div class="block">
<div class="image-w">
<img src="http://placehold.it/600x400" alt="">
</div>
<div class="text-w">
<p>Lorem....</p>
</div>
</div>
<div class="block">
<div class="text-w">
<p>Lorem....</p>
</div>
</div>
styles
.image-w img {
display: block;
width: 100%;
height: auto;
}
.block {
width: 100%;
float: left;
border: 1px solid blue;
}
.image-w {
max-width: 30%;
float: left; /* really means let other stuff float around this */
margin-right: 1rem;
}
.text-w {
width: auto;
}
flexbox (see 2:nd sample) would be the obvious choice, but sometimes one need a more cross browser solution (the support of older browser, and sometimes newer too, with render issues when using flex)
Here is a suggestion using display: table. It has the same great way as flex, being dynamic and adjust to its content.
.post-short-content {
width: 100%;
display: table;
}
.post-short-content > div {
display: table-cell;
vertical-align: top;
}
.post-short-content .entry-thumb img {
display: block;
}
.post-short-content .entry-post {
width: 100%;
background: Gray;
}
#media only screen and (max-width: 768px) {
.post-short-content .entry-post,
.entry-header {
padding : 0;
}
.post-short-content > div {
display: block;
width: 100%;
}
.post-short-content .entry-thumb img {
margin: 0 auto;
}
.post-short-content .entry-post {
margin-top: 0.8em;
}
}
<div class="post-short-content">
<div class="entry-thumb">
<img src="http://lorempixel.com/100/100/animals/3" alt="">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
<div class="post-short-content">
<div class="entry-thumb">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
If you can use flexbox
.post-short-content {
display: flex;
}
.post-short-content .entry-thumb img {
display: block;
}
.post-short-content .entry-post {
flex: 1;
background: Gray;
}
<div class="post-short-content">
<div class="entry-thumb">
<img src="http://lorempixel.com/100/100/animals/3" alt="">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
<div class="post-short-content">
<div class="entry-thumb">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
Essentially I am looking for this:
Two Divs next to each other, that then stack with responsive change
However, the difficulty lies in that I need Div #2 (the right div) to stack on top of Div #1 (the left div), instead of being pushed below it.
What I have to put the divs side by side is as follows:
<div class="container" style="width: 1100px">
<div class="left-div" style="float: left; width: 700px;"> </div>
<div style="float: left; width: 300px;"> </div>
</div>
What I have tried is doing a css media query that simply pushes the left div down 300px, using the following:
#media screen and (max-width: 1100px) {
.left-div {
position: relative;
top: 350px;
}
}
However, this doesn't cause the right div to snap to the left and stack on top.. Any ideas?
Use float:right and change the order of your html.
.right-div {
float: right;
width: 30%;
background-color: red;
}
.left-div {
float: right;
width: 70%;
}
#media screen and (max-width: 1100px) {
.container > div {
width: 100%;
}
}
<div class="container" style="max-width: 1100px;">
<div class="right-div">RIGHT DIV</div>
<div class="left-div">LEFT DIV</div>
</div>
Try this https://jsfiddle.net/1aj7wvyz/
HTML
<div class="container">
<div class="divs div-2">Div 2 </div>
<div class="divs div-1">DIV 1 </div>
</div>
CSS
.divs {
display: inline-block;//<-Here you only need this
padding: 100px;
border: 1px solid black;
margin: 20px;
}
.div-2 {
float: right:
}
.div-1 {
float: left;
}
#media screen and (max-width: 400px) { //You will change width of course
.divs {
display: block;
margin: 0 auto;
}
}
I have this code:
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.wrapper {
max-width: 500px;
margin: 0 auto;
background: grey;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}
<section class="wrapper clearfix">
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</section>
DEMO
The container won't wrap around its elements when media query gets activated. The same thing happens with floated children (which is normal, I guess).
Demo
one option is to add an "inner" wrapper; just a wrapper within your wrapper. you can make it display inline-block and set text-align center on the parent wrapper. Finally, remove the grey background from the wrapper and apply to the inner wrapper.
just one drawback is that when you make the window really small the .col divs are not lined up on the left. not sure if that's an issue for you
html
<section class="wrapper clearfix">
<div class='inner-wrap'>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</div>
</section>
css
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.inner-wrap {
display: inline-block;
background: grey;
}
.wrapper {
text-align: center;
max-width: 500px;
margin: 0 auto;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}