If you visit this page (Wordpress site) on your mobile phone (landscape view), then you will see that the top bar containing the menu and the logo is overlapping over the slider below it. It's not happening on the desktop view and mobile portrait view, then how come on the mobile landscape view?
#media screen and (max-width: 900px) {
.transparent:not(.photo-scroller-album) .masthead:not(.side-header):not(.mixed-header) {
position: relative !important;
}
}
.transparent:not(.photo-scroller-album):not(.phantom-sticky) .masthead:not(.side-header):not(.mixed-header), .transparent .mixed-header.side-header-h-stroke {
position: absolute;width: 100%;z-index: 101;
}
this code is came from your #media screen and (min-width: 400px) media query
#media screen and (max-width: 900px) and (min-width: 400px) {
.transparent:not(.photo-scroller-album) .masthead:not(.side-header):not(.mixed-header) {
position: absolute;width: 100%;z-index: 101;
}
and
.transparent:not(.photo-scroller-album):not(.phantom-sticky) .masthead:not(.side-header):not(.mixed-header), .transparent .mixed-header.side-header-h-stroke {
position: absolute;width: 100%;z-index: 101;
}
}
remove this css code from your media query
code is in the media-82b7009747.css?ver=1.0.0 file. if you can't find it add css in your custom file in media query and change css from absolute to relative
Related
I'm trying to add a banner ad to run along the left side of my blog post.
However my attempts so far have resulted in it appearing above the content pushing the blog post content down the page.
Live link: https://www.moneynest.co.uk/pension-crisis-uk/
Added into head:
<div id=”LeftFloatAds”><img src="https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt="PensionBee sidebar ad"></div>
Added into CSS
#media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{
left: 0px;
position: fixed;
text-align: center;
top: 200px;
}
}
FYI I followed this guide.
First of all, replace the position of ... move it inside your main content wrapper.
Then apply this css,
As you want to show this only on wider screen then use this,
#media only screen and (min-width: 1400px) {
#LeftFloatAds {
position: fixed;
display: block;
overflow: hidden;
left: 0;
top: 200px;
}
}
This will hide the banner on the screen smaller than 1400 pixels.
#media only screen and (max-width: 1399px) {
#LeftFloatAds {
display: none;
}
}
First, be careful with the div id quotes.
<div id=”LeftFloatAds”> should be <div id="LeftFloatAds">
Then, with that media query you are giving those properties to the element only when the screen is at least 1400px but less than 500px, which is impossible. Try it like this:
#media only screen and (min-width: 500px) and (max-width:1400px)
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;
}
}
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 am using a wordpress responsive theme, however I need the footer to not appear on any screen size smaller than an ipad. When viewed on an iphone 5 size screen the footer is too bulky and on some pages covers the content. In this instance it would be much neater to remove this for mobile phone size screens. Is there a CSS command, or any alternate method, to remove the footer below a certain screen size?
Many thanks in advance, Phil
I would say :
#media (min-width: 0px) and (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
Or shorter :
#media (max-width: 480px){
#footer {
display : none;
visibility : hidden;
}
}
A CSS media query should work
#media only screen and (max-width: enter breakpoint) {
#footer {
display: none;
}
}