My site has problem in its menu. It isn't completely visible or scroll on mobile. I'm attaching picture
I have position:absolute on drop down menu. Can i make this home menu scrollable with rest of page or any other css fluid positioning to make Admin and Logout link down for all device and desktop at bottom? Thank you.
#media (max-width: 767px) {
.log-down,.admin-down { top: 0;}
}
do the same thing that Vasanth did but instead of doing the position absolute do
#media (max-width: 767px) {
.log-down,.admin-down {
position:fixed
bottom: 0px;
}
}
e.g.
bottom:0px; = bottom of the page
top:0px; = top of the page
position:fixed = move with the screen
I hope i helped or i just misunderstood your question
Add this css and check out
#media (max-width: 767px) {
.log-down,.admin-down {
top: 0;
}
}
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)
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
I have to divs, one fixed at the top, and other fixed at the bottom.
They are fixed at large screens (Computers) but not in small screens (Mobiles).
My CSS:
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
.navbar-fixed-top {
top: 0;
}
Visit website for demo!
If you check in mobile view in desktop is also not fixed because of css define in bootstrap responsive css
Just update below css in your code:
#media (max-width: 979px)
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
}
Make it simple (In your media query)
media query#media (max-width: 979px)
bootstrap-responsive.min.css:9 .navbar-fixed-top, .navbar-fixed-bottom { position: static; }
Replace position:static with position:fixed
It looks like your body has a padding on smaller screen devices and that's what is causing the issue, not the fixed positioning itself.
That´s because this style
It changes the attribute of navbar to static on screens with 979px or less
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.!
When the screen width is less than 479px, I want the text to be under the slider. Right now when I resize my browser to < 479px, one of the text div is on top of the slider and the other is on the bottom.
Here's the testing link: http://chemistry2014.tw/
What I want it to look like:
This is due to the way you have set your html. If you have the option of changing the html markup, the best solution is to relocate the div and put it after the slider form. The alternative would be to absolute position the element with a top margin, at the correct screen size.
Example CSS:
#media only screen and (max-width: 479px)
.D-answer {
margin-top: 40px;
position: absolute;
// rest of CSS code
Edited
#media only screen and (max-width: 767px) {
.container{ width: 300px; } <----------------- add this
h4 {text-align:center; margin-left:0px;}
.D-answer {margin-left:0px;}
.A-answer {margin-right:0px;}
}