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
Related
I'm having a problem with the mobile version of a responsive website I'm building.
See that green "info" DIV that appears at the top left corner of the full-screen version of the site?
I need it to move down and live at the bottom of the screen - right above the footer DIV that has all the links - on the mobile version of the site.
Here's the full-screen version:
Here's the Mobile version:
Here's my CSS for the regular full-screen layout:
#productHoverDIV {
z-index: 20;
position: absolute;
top: 10px;
left: 10px;
width: 300px;
padding: 8px;
}
And here's the mobile rule:
#media screen and (max-width: 414px) {
#productHoverDIV {
z-index: 20;
position: absolute;
bottom: 40px; // that's the height of the FOOTER DIV below it
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
The issue is that even though I'm telling the productHoverDIV to be 40px from the bottom on the mobile layout, it still keeps it's top:10px value from the regular CSS rule, and ends up covering almost the entire screen.
So I need to somehow cancel-out the top rule - or override it with a different value, except
I have no idea know what value to put from the top cause every mobile device has a different height.
How do I resolve this?
You should change it back to its default value, which is auto.
Removed the duplicated z-index and position values.
#media screen and (max-width: 414px) {
#productHoverDIV {
top: auto;
bottom: 40px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
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)
I've a fixed positioned div which is not sticking to the corner in mobile devices.
Also, the div is not visible if values other than top:0;left:0; is added to fix the position in other corners.
I've a media query for mobile devices.
#media only screen and (max-width: 767px) and (min-width: 220px)
{
#chatbotOut {
position: fixed;
z-index: 2147483001!important;
max-height: none!important;
right: 0!important;
bottom: 0!important;
border-radius: 0!important;
}
}
The issue can be found in here.
Switch to devtools of chrome and select any mobile device and see.
I know this question appeared here a few times, but I didn't find the answer I am looking for in them.
Basically I created web for 800x600 resolution, as I want to adjust web for different resolutions on desktop from this point. Before I go on, I want to ask, which is the best option, to use % or px for defining elements ?
So let's say I got web which I want to adjust to different resolutions. There is about 12 available of them for desktop. If I want that web to look properly on each, I should code it for each,right ? What is the best way to target screen resolution ? 800x600 works well, 1024x600 works too. However 1024x768, for some reason is not being targeted. Here I ll post the code:
.scene {
padding: 0;
margin: 0;
}
.fill {
position: absolute;
bottom: 0%;
right: -1%;
left: -2%;
top: -10%;
}
.expand-width {
width: 101%;
}
#media only screen and (min-width: 1024px) and (max-height: 600px){}
#media only screen and (min-width: 1024px) and (min-height: 601px){
body{background-color: red;}
.fill {
position: absolute;
bottom: 0%;
right: -1%;
left: -2%;
top: -10%;
}
.expand-width {
width: 101%;
}
}
Firstly you are using media queries so % or px is not an issue as media queries is ther for resolving that issue only. but for true responsive ness you can go for %.
Next you are designing for 1024*600, so 1024*768 is included in it that's why ir is not effecting the code.
Try !important for 1024*768 resolution styles.
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;
}
}