So for some reasons when I add the # media query to my wordpress stylesheet, it breaks the styling of the first container. I have the proper brackets so I'm kind of confused as to why my code editor greys out the first container, in this case #navmenu.
#media only screen and (min-width: 1001px) and (max-width: 1499px) {
#navmenu {
margin-top: 50px;
float: left;
width: 15%;
margin-left:29%;
}
}
The same thing occurs, when I try to #media query wrap the original stylesheet to only load when the screen size is >1500px. The site's #wrapper breaks and all styling after that is broken, as if my brackets are not properly placed.
Related
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
My website is https://salesportalasia-testsite.azurewebsites.net
When view using mobile there is white space at header.
I have check the margin-top code in css but not success.
Can someone please help me solve this problem...
You have a inlined style padding-top: 211px on div with id="page". Remove it, and this white space will disappear.
Assign padding-top:0px !important; in mediaqueries
#media (max-width: 767px){
.wrapper {
padding-top:0px !important;
}
}
If you inspect the page in mobile view, you will see that some inline styling is being applied to <div id="page" style="padding-top: 160px"></div>.
It looks like it is being set in custom.min.js in the setNavigationOffset function.
I hope that helps.
I noticed you have padding-top:160px in top.
element.style {
padding-top: 160px;
}
In the page it looks like hardcoded inside theme page,
Its possible you have different padding-top in different mobile devices so please check that and resolve it according the device. That will helpful.
Use this css code for removing the padding top which results in the white space.
#page{
padding-top:0px !important;
}
Problem you are facing due to multiple positioning of navigation element.
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative!important;
}
This above class overwrite your fixed position class value.
.navigation-fixed-top .navigation {
top: 0;
position: fixed; /* This not work
bottom: inherit;
}
Here if you want to overcome. Just simply remove relative class
TO REMOVE
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative!important;
}
Otherwise if you want to use above class. Remove ! important keyword.
Change like this.
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative;
}
So navigation element automatically get the fixed class value based on priority..
Hops it helps.!
I had a hard time to fix it. Maybe I am just very noob on css.
Basically, I want the icon to visible only in Mobile version of the site.
in above 767px I put this code to make i hidden.
.neighbourhood-img img {display:none;}
My question is, how can I make it visible in below 767px width..
Thanks!
hey check out this css
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
#media screen and (max-width: 767px) {
.neighbourhood-img img {display:block;}
}
What you need is called media queries. Try with:
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
It will be hidden when the width of the screen is at least 768px
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can use media queries available in CSS to define the styles which meet certain conditions, in you case the condition will be screen width.
Use Css Class:
.neighbourhood-img img
{
display:block;
}
I think I understand what you're asking.
If you only want it to visible on mobile version then you could do the following:
Make a new CSS rule:
#media only screen and (max-width: 767px) {
.m-show {
display: block !important;
max-height: none !important;
overflow: visible !important;
}
}
Then wrap your icon in a div tag as below, with the styling to hide it (but make its class the m-show class):
<div style="display: none; max-height: 0; overflow: hidden" class="m-show">
Your hidden content here...
</div>
This will hide it if it isn't in that max width of 767, otherwise it will show it. Hope this makes sense. I would also suggest making that inline styling in the div tag a separate CSS class (just because I don't like inline styling).
I've a question, I'm trying to structure a site so that when it is in desktop mode a particular div which contains an img element is set to display:none;
When the screen size gets to 450px or less I would like to set the div to display:block and show it.
However, I'm having an issue doing so as the display:block never get's applied. I can do the reverese (display:block to display:none) . I'm guessing my issue is that I'm trying to apply a style to an element which does not exist on the page, if that is the case is there a way I can hide it, so that it takes up no space and show it when the screen is less than 450px?
Any help is much appreciated.
This is my CSS
#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}
This is my Media Query
#media screen and (max-width: 450px){
#toplogo{
display: block;
}
}
This is the HTML
<div id="toplogo">
<img src="/images/myimage.png"/>
</div>
Any help is much appreciated.
Your code seems just fine right now.
But I'd suggest mobile first approach, so the global style is aimed at mobile devices and later altered for bigger screens. Be sure to check what are you altering with your css media queries and check your code order so you are not overwriting media queries with your styling later in the 'global' css code
This snippet below wont work as intended if my media query will be placed at the top of css file, as it will be later overwritten - example of badly organized css media query
Working example
/* mobile first approach */
#toplogo {
display: block;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.hey {
display: none
}
#media screen and (min-width: 450px){
/* hide block when window width is at least 450px */
#toplogo {
display: none;
}
.hey {
display: block
}
}
<div id="toplogo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<div class="hey">Hey, I'm bigger than 450px!</div>
http://jsfiddle.net/gfuunyak/4/
No need to apply any js.
Your css & media query are perfectly written; It works in my end; if not work in your end; then just add !important after display: block;
Hello there guys i would like to ask some questions about the media queries.
I have being working on a site who already have some responsivess on it.
And i'm forced to write the code on a clild theme and not on the original files so when i try to put inside some new media query it wont work.
Where the problem is
The site defaut media queries are
#media only screen and (max-width: 3000px)
#logo {
text-align: center;
padding-right: 120px !important;
float: none !important;
}
The target is the logo and i want to write something like this to change it on both landspace and portait.
#media screen only (max-width:480px){
#logo{
margin-left:-23%!important;
}
}
#media screen only (max-width:320px){
#logo{
margin-left:-39%!important;
}
}
When i try that with min-width and not max-width of course it will work but it will mess the rest.
The thought about max-width i have is
max-width:320px -> when the screen resolution under 320 use the code when it is not use the code of the 480px.
It is wrong?
You could do something like this:
#media only screen and (max-width:480px){
#logo {
margin-left: 0 !important;
}
#header {
padding-left: 0 !important;
}
}
And you won't need any media queries for 320px (so you should remove the media queries for 320px)