Site: https://borealisproductions.ca/
When the browser is re-sized the phone number on the left side of the page disappears, but the navigation menu on the right side of the page is responsive.
How can I fix this?
Those are the envolved lines in your CSS document:
#media screen and (max-width: 1200px) {
.phone-number-custom {
display:none!important;
}
It fix a breakpoint and removes the with that class, that's why it "disappear".
You can eliminate the rule, or fix it on onother breakpoint, for instance 768px:
#media screen and (max-width: 768px) {
.phone-number-custom {
display:none!important;
}
anyway that's up to your needs...
Related
This page https://affliates2.blogspot.com/p/blog-page.html is my contact us page only displays content in right half of the page on mobile but it appear properly on desktop.
It display their content in only half of the page while leaving the other half blank on all screen sizes. I have tweaked my HTML source code and couldn't get what's causing this.
I am using a responsive template, I'm confused why this error should occur.
please help me
Because you have media query which works on viewport width < 760px (mobile)
#media screen and (max-width: 480px) {
.post {
width: 41%
}
}
#media screen and (max-width: 568px) {
.post {
width: 28.5%
}
}
#media screen and (max-width: 760px) {
.post {
width: 29%
}
}
Just remove this css selectors and page will look fine
on this page: here
in responsive view of 360×640
I don't want the sidebar to appear or maybe appear in a click button like menu above as it is pushing the original content down
see
I have tried
visibility:hidden;
for this screen resolution but then just the text disappears and box remains there
see
any help is much appreciated!
Thanks
#media screen and (max-width: 600px) {
.sidebar{
display:none;
}}
according to your page
#media screen and (max-width: 600px) {
.product-listy {
display:none;
}}
My navbar is supposed to be responsive. How can I hide the other links apart from a logo link called logo when the screen size is less than 680px? Thanks.
Try using a media query like this
#media screen and (max-width: 680px) {
.navbar a:not(:first-child) {
display: none;
}
}
Assuming that your logo link is an anchor (a)
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;
}
}
I have a menu bar in html page, it should display only if the
screen resolution is 800x400px. how to achieve this using css3/css only not by using javascript.
first you should keep the menu bar display:none and then something like this
#media all and (width: 800px) and (height: 400px) {
#menubar {
display:block;
}
}