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.
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 have a problem with my navbar. I'm using Bootstrap for a responsive navbar but it overflows on the mobile version of my site. I used overflow-x: hidden on body and it solved the problem for larger versions but not the mobile version. I've checked for margin/padding issues on all my elements in the navbar but can't seem to find the problem. You can see the issue on www.tcbarringerphotography.com on the right hand side if you view it smaller than 500ish pixels. Any ideas?
Your problem is with width of two classes that you are using in your footer
social-media
blog-posts-link
#media only screen and (max-width: 1040px) {
.social-media {
width: 100%;
}
.blog-posts-links {
width: 100%;
}
}
Reduce the width to 90% at media screen max-width: 576px;
#media only screen and (max-width: 576px) {
.social-media {
width: 90%;
}
.blog-posts-links {
width: 90%;
}
}
mark as answer if it works thank you ;-)
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 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
I just finished with creating my site and have been tweaking the mobile views. Now for the life of me I cant figure out why the navbar-brand is disappearing when the site is viewed on mobile chrome or Desktop chrome with a small view port. It does appear in safari on my iPhone, so I'm sure its there. Any help would be appreciated.
Well, you have defined your .navbar-brand img to have a width: auto; in your #media (max-width: 767px) declaration try to remove the width: auto;.
E.g.
#media (max-width: 767px) {
.navbar-brand img {
max-height: 40px;
/* width: auto; */ /** comment out or remove this line **/
margin: -10px 10px 0 0;
}
}
Hope it helps.