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;
}
}
Related
#media only screen and (max-width: 480px) {
#media_wrapper {
height: 100%; //// ?????
display: inline-block;
}
}
#media_wrapper {
height: 100%;
display: none;
}
As you can see, the element is not active for large screens display: none;, but I do not know how to correctly set the display attribute in the query to display on a small screen, after trying for example: block or inline-block, the result is one - nothing is displayed. What am I doing wrong?
Try this
Check Demo HERE
Reverse it
CSS:
#media_wrapper {
height: 100%;
display: none;
}
#media only screen and (max-width: 480px) {
#media_wrapper {
height: 100%;
display: inline-block;
}
}
best way is to change the order of command:
See fiddle:https://jsfiddle.net/17d6hxsL/5/
#media_wrapper {
height: 100%;
display: none;
}
#media only screen and (max-width: 480px) {
#media_wrapper {
display: block;
}
}
.wrapper{
height:100%;
}
<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>
Or you should set !important to pervent override:
See fiddle:https://jsfiddle.net/17d6hxsL/4/
#media only screen and (max-width: 480px) {
#media_wrapper {
display: block!important;
}
}
#media_wrapper {
height: 100%;
display: none;
}
.wrapper{
height:100%;
}
<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>
hide a div only on mobiles(large screen always has to be displayed) based on a content using Angularjs or css
Change the 2000px to 480px or other value, it depents of you
.box{
width: 100px;
height: 100px;
background-color: blue;
display: block;
}
#media screen and (max-width: 2000px){
.box{
display: none;
}
input:checked + .box{
display: block;
}
}
<input type="checkbox">
<div class="box">
</div>
Add class = "divclass" to your html then in your css file:
#media (max-width:480px) {
.divclass{
display: none;
}
}
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;
}
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/
I have a little problem using responsive navbar. I have two divs that centralize my page.
<div id="tudo">
<div id="conteudo">
<!--My content here-->
</div>
</div>
And the css:
#tudo
{
width: 876px;
margin: 0 auto;
text-align: left; /*hack for IE*/
}
#conteudo
{
padding: 5px;
}
But when I copy the code for responsive the layout does not work -> Here
The problem is that your CSS is setting #tudo to a fixed width of 876px which doesn't allow the navbar to be responsive.
The easiest solution would be to use a #media query to set the width of the #tudo to auto when the responsive navbar kicks in at 979px
#tudo
{
width: 876px;
margin: 0 auto;
text-align: left; /*hack for IE*/
overflow:hidden;
}
#conteudo
{
padding: 5px;
overflow:hidden;
}
#media (max-width: 979px) {
#tudo {
width: auto;
margin: 0;
}
#conteudo {
width: auto;
}
}
Demo on Bootply