I have a wordpress site. I am facing issues with custom media css code. When I try to save the code it vanishes and doesn't reflect on the site. Any help would be greatly appreciated. Following is the code I am trying to add:
#media only screen and (max-width: 719px)
.site-title {
display: none;
}
#media only screen and (max-width: 719px)
#nav-header.nav-container {
background-image: URL(http://i2.wp.com/vedsutra.com/wp-content/uploads/2016/07/cropped-VedSutra_logo.png);
background-repeat: no-repeat;
background-position: center;
}
You should wrap your query in {} like the following example:
#media only screen and (max-width: 719px) {
.site-title {
display: none;
}
#nav-header.nav-container {
background-image: URL(http://i2.wp.com/vedsutra.com/wp-content/uploads/2016/07/cropped-VedSutra_logo.png);
background-repeat: no-repeat;
background-position: center;
}
}
Related
Good morning,
I have created a media query for my website. I have the feeling that it is slowing down my website, because it is not optimized.
On mobile phones, I have a specific image. For tablets and desktops I have another image to be shown.
The media query I have works just fine. But it is not optimized.
Can anyone help me to get it optimized?
this is the query:
body, html {
height : 100%;
width: 100%;
margin:0;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
Please use this CSS code.
In media query, styles defined outside of query is inherited.
So my code works exactly like yours, but the code has been greatly reduced.
body, html {
height : 100%;
width: 100%;
margin:0;
}
.Frontpage-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
You can check this answer.
Here are some tips to optimize this
Use Low size images
Use Low size videos or embed them from YouTube or Vimeo
Compress this CSS code.
У меня есть следующий код
.bg-if-premium {
background-image: url(photo_2021-05-22_20-40-40.jpg);
background-size: 100% 100% !important;
background-position: fixed;
background-attachment: fixed;
}
.bg-if-free {
background-image: url(photo_2021-04-16_16-43-00.jpg);
background-size: 100% 100%;
background-position: fixed;
background-attachment: fixed;
}
#media (max-width: 767px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
#media (max-width: 480px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
But on a mobile device, the background is still present. How to solve the problem?
#media screen and (max-width: 767px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
#media screen and (max-width: 480px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
Include the #media screen and (desired width) and like Mordred stated, separate the class identifiers by a comma.
Also since it looks like your working from a website first approach, you shouldn't have to include both of these screen queries. The first one will do the trick.
My website is www.rosstheexplorer.com.
I was recently given the following code -
body.custom-background {
background-image: none;
}
#media screen and (min-width: 800px)
{
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
#media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}
On non mobile devices this solved the problem I was having with H1 and the plugins overlapping the navigation menu. Annoyingly on mobile devices the problem persists.
I tried to resolve the problem on mobile devices by modifying the code to the below but it sadly did not give me the desired result. Does anyone have a suggestion?
body.custom-background {
background-image: none;
}
#media screen and (min-width: 1px)
{
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
#media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}
#media screen and (max-width: 660px) {
img.mobile-header-img {
display: block;
}
}
This occures because you mobile navigation menu has negative bottom margin. Because of that, it just "pulls" content from underneath it.
To fix that you need to reset the bottom margin like so...
#media screen and (max-width: 799px){
.main-navigation {
margin-bottom: 0;
}
}
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; }
}
I have a div
<div id="page">
</div>
With the following css:
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
I notice when I resize my browser, I see the "mobile" background (good) but if I go back and make my browser large, my previous "large" background does not always reappear.
It's an intermittent problem but it's happening often enough that I think I should address it.
Is there any way to get around this "background image not appearing" problem or a way to resize background images, so that the media query "shrinks" the background image to fit the new size? As far as I know there is no (widespread) way to change the size of a background image...
According to this test:
If you want only the desktop version of the image to be downloaded on the desktop...
and only the mobile image to be downloaded on the mobile device -
You need to use a min-width declaration to specify a minimum browser width for the desktop image...
and a max-width for the mobile image.
So your code would be:
#media (min-width: 601px) {
#page {
background: url('images/white-zigzag.png') repeat-x;
}
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
The code you provided is a little buggy which is probably a good place to start currently you have
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
The media query portion isn't complete. You still need to provide the CSS selector that you used outside of the query:
#page {
background: url('images/white-zigzag.png') repeat-x;
}
#media (max-width: 600px) {
#page {
background: url('images/white-zigzag-mobile.png') repeat-x;
}
}
Start with that and let me know if that fixes things.
please use
#media screen and (min-width: 320px) and (max-width:580px) {
#page {
background: url('images/white-zigzag.png') repeat-x
}
}
<div style="width: 100%; height:100%;" class="bg"></div>
.bg{
background-image:url("coc.jpg");
background-repeat: no-repeat;
background-size:cover !important;
background-position: center;
overflow: hidden;
}
#media(max-width:900px){
.bg{
background-image:url("all.jpg") !important;
background-repeat: no-repeat;
background-size:cover !important;
background-position: center;
overflow: hidden;
}
}