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;
}
}
Related
I use Bootstrap 4 for making my website responsive. Bootstrap is a Mobile first. As I understand that's mean I should first write CSS for small screens and then add breakpoints for bigger screens.
That's what I have:
#main{
width: 100%;
}
#media (min-width: 576px) {
#main{
width: 90%;
}
#media (min-width: 768px) {
#main{
width: 80%;
}
}
When in Chrome I open console and click "Toggle Device Toolbar" and change screen width to 350px ("responsive"), it uses css for 'min-width 768 px' (not even for 576px) and makes #main width 80%.
Why is that happening and how to solve it? Thank you!
try to use #media screen and (min-width: XXXpx) { ... } instead of just #media (min-width: XXXpx)
You could use #media screen and (min-width: [...]px). Otherwise your code seems good.
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 have a logo in my header that's too small. I found this piece of code where I can increase the size but I only want it to apply to computer screens and not to mobile or tablet. The code is:
.site-title img {max-width:100%; height:auto}
.site-description {display:none}
I want to change the 100% to 200% but only on computer screens.
Can somebody tell me which code makes that happen?
Responsive Web Design, using media-queries:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
Media Queries are used to apply CSS rules to only matching devices. Specify a max-width or min-width to apply the style rules to.
#media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
I have a Wordpress with Boss 2.0 theme installed and a custom header I want to hide on mobile device and only show it on desktop 720px or wider.
I created <div class="container" id="custom-header">
and in my CSS file i did:
#media screen and (max-width: 720px) {
/* Remove Header for phone portrait */
#custom-header {
display: none;
}
}
Obviously it doesn't work, but if I try the opposite:
#media screen and (min-width: 720px) {
/* Remove Header for phone portrait */
#custom-header {
display: none;
}
}
It work perfectly hiding my header when I stretch my window more than 720px.
First reflex was to add display: none !important; but no better results.
Any solutions for hiding my content on device less than 720px wide?
probably your "custom-header" is inheriting another css, check it on style elements of your developer tool (f12 in major browsers)
another thing you should see is the cascade declaration in mediaQuerys
if your using max-width, rembeber declarate them from higher to lower .
With min-width from lower to higher.
Hope works for you
i am not sure about how you tried reducing to 720px. Try by toggling the device mode that are available in google chrome developer tool.
You can try
#media all and (max-width: 720px) {
/* Remove Header for phone portrait */
#custom-header {
display: none !important;
}
}
Adding media all you will see the css change in your pC
Try this way
#media (min-width: 320px) and (max-width: 720px) {
#custom-header {
display: none;
}
}
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.