This Code isnt working and I dont understand what is happening, since everything else is working fine and I have the meta viewport tag on the header:
.content {
width: 100%;
height: 100%
}
.content:before {
content: '';
position: absolute;
top: 5%;
left: 5%;
}
#media (max-width: 1024px) {
.content:before {
top: 15%;
left: 15%;
}
}
I tried to modify the media with screen and min-width. I also tried to swap the medias position and nothings showing on Google chromes dev console, while other medias and rules are showing and working properly.
Is it posible to modify those attributes on that kind of element with CSS?
Thanks
You're missing the unit in your media query:
#media (max-width: 1024px) {
.content:before {
top: 15%;
left: 15%;
}
}
Related
on my website I have a menu. It looks ok on big laptop, tablet and mobile but for small laptops, the logo goes on the menu.
I would like to change the mobile breakpoint of the menu to become a burger menu earlier.
I am using wordpress and the Stockholm Theme.
If there is an area where you can write custom css, a possible solution is to use a media query.
#media only screen and (max-width: 600px) {
//your css styles here
}
This media query applies the styles inside whenever the screen width is smaller than 600px.
There are many resources out there for learning how to create hamburger menus. This should answer your main question.
#media only screen and (max-width: 1199.98px) {
.main_menu { display: none!important; }
.mobile_menu{ display: block !important; }
.mobile_menu_button { display: table !important; }
}
.logo_wrapper {
left: 45%;
position: absolute;
height: 50px!important;
}
.q_logo {
display: table-cell;
position: relative;
top: auto;
vertical-align: middle;
}
.q_logo a {
left: -50%;
width: auto !important;
}
.q_logo img {
top: 0 !important;
left: 0;
}
.header_inner_left{
position: relative!important;
left: 0!important;
margin-bottom: 0;
}
}
1199.98px is the breakpoint that Bootstrap uses for small desktops, but change it to whatever breakpoint fits best for you.
regarding the css media queries, is there any possibility to call a page (html template) when the screen resolution is less than a predefined value please ?
I'm not a site developper and actually I'm not so sure how to build the css style...
Thank you,
LE: it's about redirecting to a specified page, could be html in the end , something like this .Is this possible somehow ? Not so sure how to compose the url part.
.getbacktodesk {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: #f9f9f9;
}
.getbacktodesk:before {
background: url(http://neuegrid.com/?page_id=404404);
}
#media (max-width: 800px) {
.getbacktodesk {
display: block;
}
header, row, logoimg, #scroll_totop,
nav,
._page {
display: none;
}
}
<div class="getbacktodesk"></div>
I am not sure if this way is okay, you cannot action a php script via css!
<style>
#media (min-width: 600px) {
body*{display:none;}
//will display no element
.alertmessage{display:block;}
//Put message in this div and display none in normal css queries.
}
</style>
I am building a wordpress site and am trying to absolutely position some social media icons on the bottom right for a site >60em and the top right for <60em screen resolution. The follow code works fine in all browsers and OS except Safari. Not sure what's going on. Any thoughts?
Site: http://www.itsjustchicken.com (see instagram icon on right)
.social-icons {
margin: 1% 1%;
position: absolute;
bottom: 0;
right: 0;
}
#media (max-width: 60em) {
.social-icons {
margin: 1% 1%;
position: absolute;
top: 0;
right: 0;
}
}
Try this:
#media screen and (max-width: 60em) {
.social-icons {
margin: 1% 1%;
position: absolute;
top: 0;
right: 0;
}
}
I have one button that I must position absolute in accordance with what I'm doing. This is fine; except at 1600px resolution - the button goes out of the screen; I want to utilize media queries to fix this, but my first two efforts are not working and moving the element at the specified viewport and I'm not sure.. why.
Attempt # 1:
#media screen and (min-width:1600px) { /* large resolution */
#menu_tog { margin-left: 337px; }
}
Attempt # 2:
#media (max-width:1600px;) and (min-width:1300px;) { /* large resolution */
#menu_tog { margin-left: 337px;}
}
Original (expect position change at 1600)
#menu_tog {
cursor: pointer;
margin-left: 138px;
margin-top: 230px;
max-height: 35px;
max-width: 50px;
position: absolute;
z-index: 999;
}
Make sure you're using top and left with absolutely-positioned elements, not margins. From there, a simple media query should do the job:
#menu_tog {
position: absolute;
cursor: pointer;
margin: 0;
left: 138px;
top: 230px;
max-height: 35px;
max-width: 50px;
z-index: 999;
}
#media (min-width: 1600px) {
#menu_tog {
left: 337px; /* adjust as necessary */
}
}
I am using the following css code. What I want to do is if the user is on a iPad I want the background-image to be headerold.jpg or some way to make the current headernew.jpg to display properly on the iPad. Currently part of each end is cut off. I have tried #media query but I am not able to get the code to work. Any help would be appreciated.
Thanks Roger
div.art-header-jpeg
{
position: absolute;
top: 0;
left:-50%;
width: 1344px;
height: 150px;
background-image: url('../img/headernew.jpg');
#media all and (max-width: 1000px) {background-image: url('../img/headerold.jpg');}
background-repeat: no-repeat;
background-position: center center;
}
You could do something like this.
CSS:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to a particular image (change accordingly*/
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
However there are different methods including a JQuery Method. You should check out some discussion about it here.
I am trying to get the headernew.jpg to display on an iPad properly as well as other computer screens but first just the iPad. If I remove the position: absolute then the complete header moves to the right and only shows about 50% of the header. Is there something I need to add like suggested in another post like this ..
<meta name="viewport" content="width=device-width, initial-scale=1">
if so where should it be placed?
My code now looks like this;
div.art-header-jpeg
{
position: absolute;
top: 0;
left:-50%;
width: 1344px;
height: 150px;
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
div.art-header-jpeg
background-image: url('../img/headernew.jpg');
}
background-repeat: no-repeat;
background-position: center center;
}