I'm sure there is a simple answer to this question. Instead of having the left div appear first on mobile (media queries), as it naturally would, how would I make the right div appear first instead?
The left div would appear first on desktop view.
<style>
.left {
width:27%;
float:left;
}
.right {
width:70%;
float:right;
}
</style>
<div id="tier-1">
<div class="left"></div>
<div class="right"></div>
</div>
Just write the right div first.
Use a media query. Like this:
#media (max-width 500px){
.right{
float: left;
}
}
Of course, 500px could be anything. Chrome developer tools let you emulate different sizes and even have some preset phone resolutions. Nonetheless, You could completely change how everything is formatted with media queries.
See this description from w3 schools.
by using media queries we can change the css value of all the html elements.
commonly media queries are write in 4 common screens . also customization is possible .
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
for mobile device 767(landscape) and 479(portrait). use below media query for your question.
#media only screen and (max-width: 479px) {
.left {
width: 27%;
float: left;
height: 50px;
background-color: #393318;
color: #fff;
text-align: center;
}
.right {
width: 70%;
float: right;
height: 50px;
background-color: green;
color: #fff;
text-align: center;
}
#media only screen and (max-width: 479px) {
.right {
float: left;
}
.left {
float: right;
}
}
}
<div class="left">leftdiv</div>
<div class="right">right div</div>
Thank you everyone for your contributions, but I ended up finding a solution on this URL: Use CSS to reorder DIVs
I used the CSS3 Flexbox Layout Module. Thank you again!
Related
Codepen here: https://codepen.io/codepenuserpro/pen/ExQrEbo
HTML:
<div></div>
CSS:
div
{
height:400px;
width:400px;
background-color:red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px)
{
background-color:blue;
}
Why isn't the div changing background color even when I resize the browser window to between 1068 - 1380px?
Media Query Syntax
A media query consists of a media type and it can contain one or more expressions, which resolve to either true or false.
If it resolves to true, the css code inside of it is applied.
#media not|only mediatype and (expressions) {
<stylesheet>
}
You must select the element- div in this case, inside the media query as of the following.
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color:blue;
}
}
div {
height: 400px;
width: 400px;
background-color: red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
<div></div>
You need to select the selector(div) inside media query.
try this:
#media only screen and (min-width: 1068px) and (max-width: 1380px){
div{
background-color:blue;
}
}
You didn't select the div in the second approach.
You may want to have this:
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
My page here: https://webtan.jp/
I hide this section:
#top__fullcarousel {
display: none;
}
but after hiding it, the following part (the siteContent block) didn't fit (
the error here)
I fixed the padding and it's only working with viewport(min width 1200px), not working rightly with other viewports (mobile, ipad...)
.siteContent {
padding-top: 129px;
}
How can I responsive it in this case?
You can explicitly set padding that you need for each by each device width:
#media screen and (max-width: 1000px) {
.siteContent {
padding-top: 129px;
}
}
#media screen and (max-width: 850px) {
.siteContent {
padding-top: 109px;
}
}
#media screen and (max-width: 600px) {
.siteContent {
padding-top: 89px;
}
}
#media screen and (max-width: 320px) {
.siteContent {
padding-top: 69px;
}
}
Of course you can use a lot of another methods, but this one is most ease way.
I have a clickable icon image in the header of my web page; I want to hide the icon image when the page is pulled up on a desktop, laptop, and/or any larger screens. However, I want the icon to show when the page is pulled up on a mobile device/ phones and hand-held tablets.
This is what I tried:
#media screen and (min-width: 0px) and (max-width: 700px) {
.ghost {
margin-left: 500px;
/*show the icon on smaller screen*/
}
}
#media screen and (min-width: 701px) and (max-width: 1024px) {
.ghost {
margin-left: 500px;
display: none;
/*hide the icon on larger screens*/
visibility: hidden;
}
}
/* Adding this so the demo is visible even though the image link is broken. --editor */
.ghost img { border: 1px solid blue; }
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
...could I get some help with this please? ...thanks
Hi
If you want to display icon JUST on <= 700px devices your code should look like this below. Setting min-width: 0px in first #media and max-width: 1024px in second is unnecessary.
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
}
}
#media screen and (min-width: 701px) {
.ghost {
margin-left: 500px;
display: none; /* Acts like this item isn't there at all */
visibility: hidden; /* Doesn't show the item, but saves space for it */
}
}
I don't know your full issue, but if you want to act like it isn't there on large screens this CSS below will be better ;)
.ghost {
display: none;
}
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
display: initial;
}
}
More info about media queries you can find e.g. on this W3Schools site.
Cheers
Try this
You have to write only one media query. Like this
#media only screen and (min-width: 767px) {}. It for mobile devices.
.ghost {
display: block; /* default it will show in mobile devices. */
}
#media only screen and (min-width: 767px) {
.ghost {
display: none; /* it will hide larger than 765px eg: laptop and desktop */
}
}
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
The standard resolution for desktops is 1024px.
For tablets, it is 768px and for mobile it is 320px;
So to hide the image for desktops and above, you could do the following:
.ghost {
cursor: pointer;
}
#media (min-width: 1024px) {
.ghost {
display: none;
}
}
<div onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.
Here's what I've got so far...
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?
You will need two things. The first is #media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.
#media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.
Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
#media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
#media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
You can be guided by this example. On your css file:
.deskContent {
background-image: url(../img/big-pic.png);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
.phoneContent {
background-image: url(../img/small-pic.png);
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
}
#media all and (max-width: 959px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
On your html file:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
i just switched positions and worked for me (showing only mobile )
<style>
.MobileContent {
display: none;
text-align:center;
}
#media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.
The global code in your CSS file will be: (for the same DIV):
.header_div {
display: none;
}
#media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
Hope this helps.
Thank you.
try this
#media handheld{
#title_message { display: none; }
}