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>
Related
I have a Word Press site that is using the Avada Website Builder plugin, but with a custom template and a custom CSS file.
I have bootstrap 4.6 loaded onto the site as well. The bootstrap responsive queries run normally, but my custom CSS queries have some issues. Example -
.image-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
#include media-breakpoint-down(md) {
width: 100%;
height: 1620px;
position: absolute;
}
&.desktop-bg {
#include media-breakpoint-down(md) {
display: none;
}
}
&.mobile-bg {
#include media-breakpoint-up(lg) {
display: none;
}
}
}
That is my SASS file, and the CSS outputs as -
#media (max-width: 979.98px) {
.image-bg {
width: 100%;
height: 1620px;
position: absolute;
}
}
#media (max-width: 979.98px) {
.image-bg.desktop-bg {
display: none;
}
}
#media (min-width: 980px) {
.image-bg.mobile-bg {
display: none;
}
}
When I view the page on mobile iOS Safari or on Chrome, those CSS rules do not load. However the CSS rules for the bootstrap grid (e.g. col-lg-4) load correctly.
When I view the page on Firefox, if I inspect and view as a predefined option, e.g. "iPhone 12/13" the CSS for my backgrounds do not load. However when I change the width of the window manually, the CSS loads correctly.
I had to load this line of code -
<meta name="viewport" content="width=device-width, initial-scale=1">
It is now working correctly
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%;
}
}
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.
I have some code that is not rendering correctly in the minified output.
Here's the basics:
I have a mixin:
.Aspect(#widthRatio:16; #heightRatio:9; #useableWidth:100%) {
display:block;
overflow:hidden;
max-width:#useableWidth;
&::before {
content:"";
float:left;
padding-top:percentage(#heightRatio / #widthRatio);
}
}
... and some styles:
.backdrop {
position:absolute;
top:0;
left:0;
width:100%;
.Aspect(1; 1);
.Landscape({
.Aspect(16; 9);
});
}
.app-bar-spacer-3 {
height:250px!important;
background-color:Lime;
}
Here's what's happening.
The .app-bar-spacer-3 style is not working, however it's due to the rendering of the previous style .backdrop.
I can make it go away by removing the pseudo element in .Aspect() but obviously that isn't a fix.
The code seems ok in the none minified stylesheet but on inspection in Chrome, this is what is being output:
.backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
overflow: hidden;
max-width: 100%;
}
.backdrop::before {
content: "";
float: left;
padding-top: 100%;
}
#media screen and (orientation: landscape) {
.backdrop {
display: block;
overflow: hidden;
max-width: 100%;
}
.backdrop::before {
content: "";float:left;padding-top:56.25%}.app-bar-spacer-3{height:250px!important;background-color:#0f0}
There's actually more but as you can see all the code following is being output inside the curly brackets belonging to the pseudo element.
I've looked at it so long I'm not sure whether it's my code or LESS.
Anyone advise?
After much, much testing, I found the root cause of the issue.
It does in fact eminate from code further up the stylesheet, but doesn't actually break until it hits the above code.
Here's the code that broke LESS:
.md-text-tab {
&:not(:last-child)::after {
content:'\\';
}
}
More specifically, it's the escaped slash.
I currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}