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 ;-)
Related
I have a survey page, where the body has background-color: #A71930, and a container with background-color: white, which holds the <form>, like this on a desktop:
I have added these #media queries for mobile devices:
#media all and (max-width: 600px) {
#survey-container {
width: 100%;
}
}
#media all and (max-height: 600px) {
#survey-container {
height: 100%;
}
}
These queries make the page look like this on a phone screen:
This is good for now, but my issue is when you scroll to the bottom, then start going back up, this happens here:
As you can see, when you scroll up, part of the container is cut off at the bottom, still leaving the <form> content. You can see for yourself here. So, what is causing this problem, and how can it be fixed? My full code can be viewed below(the issue does not seem to occur in codepen, so only try the issue in a mobile browser):
https://codepen.io/jerryd2304/pen/qvERZL
I was able to replicate this in Mac/Safari (12.0.3), but not Chrome or Firefox.
Fix 1:
Remove the height: 100% altogether.
Fix 2:
Change height to min-height:
#media all and (max-height: 600px) {
#survey-container {
min-height: 100%;
}
}
Either way, the problem is resolved:
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 am making a webpage. I am the first to admit my CSS skills are not the best.
There is blank space appearing to the right side of the mobile version page. (www.perfectshinesmile.com)
Your container is not picking up margin:0 auto in mobile css.
So replace from main.css at line number 2638
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 0;
}
to
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 auto;
}
Hope this will help :)
your .container has set max-width property to 360px. Change it to max-width: none. But I reccomend you to your bootsrap grid for web layout, you would avoid such a problems. I can see in your code that a lot of elements has specific width value, resulting to broken layout on mobile devices.
In your case you have a second scroll bar!
or you do this
::-webkit-scrollbar {display:none !important;}
Or you do this
#media only screen and (max-width: 641px){
.section {
min-height: auto;
width: 360px;
overflow: visible;
}
}
Don't use the overflow:scroll; ever unless you need it! especially in phones port!
I understand there's a gazillion questions on this issue but none of the solutions on any of them seem to work for me. This is what my markup looks like:
<div class="immersion-div">
<div class="immersion-div-image"></div>
</div>
As you see, it's a fairly straightforward setup with one div containing another. The parent div is styled to adapt its height to the device screen resolution using media queries. Here's how the two divs are styled:
Parent div:
#media (min-width: 2000px) { .immersion-div { height: 1307px; } }
#media (max-width: 1999px) and (min-width: 1401px) { .immersion-div { height: 1000px; } }
#media (max-width: 1400px) and (min-width: 750px) { .immersion-div { height: 500px; } }
#media (max-width: 749px) and (min-width: 300px) { .immersion-div { height: 300px; } }
#media (max-width: 299px) { .immersion-div { height: 136px; } }
Child div (with the image background):
.immersion-div-image {
background: url(../../bootstrap/img/homepage/spanish_immersion.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
The image serving as the background is 2880px by 900px (although that should be inconsequential in this scenario) and the resolution of the screen on which I tested this is 1366px wide. Per the defined media queries, the height of parent div should evaluate to 500px since the screen falls in the 750px-1400px category. However, on Internet Explorer, the div seems to render with a height of 1000px! This issue is only affecting IE whereas all other browsers are rendering the divs fine. What could be the problem? Before anyone suggests using background-size: contain, I must admit I tried it and it messes up the aspect ratio leaving a blank band at the bottom of the div which is why I don't want to go that route. Besides, I want to understand why cover wouldn't work on IE when it does just fine on all other browsers.
Just in case it helps, the site in question is peppyburro.com and the affected divs are on the last green image on the home page.
I have a website that is totally responsive however there is one part that is not ans is situated below the slogan URBAN FREE SPIRIT (I am talking about the images)
I tried to had the class container, the class img-responsive but nothing seems to work ..
Here is my website, it will be easier to have a look through the inspector I think than with copy paste
http://v1954132.caqoajqezbu9.demo42.volusion.com/
.home-stage-v2 isn't responsive.
.home-stage-v2 {
width: 1000px;
height: 1200px;
position: relative;
margin-top: 25px;
}
Apply media queries for it for the various widths.
#media (min-width: 1200px) {
.home-stage-v2 {
width: 1000px;
}
}
#media (max-width: 1199px) {
.home-stage-v2 {
width: 100%;
}
}
Example above. You will also have to rework the images as they're with fixed width and also don't respond to width changes. I'd suggest reworking them into either percentages or putting them into a grid.
http://getbootstrap.com/examples/grid/ for examples on grids.