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
Related
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'm fairly new to using media queries and i'm probably missing something obvious but I've had a look around stack overflow and haven't yet found my solution.
Also to note, I'm using an old phone (iPhone 4S) on Chrome browser to view my site.
When I view the site on my mobile it's the exact same as if I was to view it on my browser and hasn't took my media queries into account as the browser does when I resize it.
Note the first image is how it currently looks, I want it to look like the second image
I'll try to include the relevant code:
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Media queries:
#media all and (max-width: 701px) {
.quote {
width: 550px;
}
}
#media all and (max-width: 551px) {
.quote {
width: 400px;
bottom: 325px;
}
nav { display: none }
header {
width: 100%;
}
.title {
display: block;
margin: 0;
padding: 35px;
text-align: center;
color: #2d2d2d;
}
.quote span { color: #2d2d2d; }
.explore span { color: #2d2d2d; }
.explore {
display: block;
border: 1px solid #2d2d2d;
}
body {
background-image: url("http://htc-wallpaper.com/wp-content/uploads/2013/10/Mountain1.jpg?8a4edc");
background-size: cover;
background-repeat: no-repeat;
}
}
I think it has. It's the font size you need to have changed. I believe some mobile devices automatically adjust your font, but it may be something you don't want. Try this:
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
Let me know if that answers your question.
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>