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.
Related
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 have a website: www.ribbonhill.co.uk
I have been trying to remove a white space on the right, which appears on mobile phone.
Strangely it doesn't appear on full mode on both Chrome and Edge browsers, but when it is resized small the problem only appears on Edge but not on Chrome.
The site was built using Django-oscar and itself didn't have any issues.
I have tried removing two CSS files and there is no white space. These two files are ribbonhill.css and w3.css.
By removing w3.css there is only a small white space but removing ribbomhill.css leaves a large space.
I have been trying to remove a few codes but struggling.
I have tried
#media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
html,
body{
width:100%;
overflow-x:hidden;
}
}
And
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
But still no luck.
Update:
Sorted on mobile phones and chrome but edge / internet explorer showing below?! I guess I will just leave it as it is
I have analyzed your webiste www.ribbonhill.co.uk. Its a small CSS mismatch .
Inside the navbar remove the min-width: 400px; for your site logo and width:80% its not a vaild input value.
Change your CSS as follow:
.logo {
margin-left: 50%;
transform: translateX(-50%);
min-width: auto !important; }
Remove the padding: 2rem 0 0; for your .footer class. because its affecting the container padding.
It should be like that:
.footer, footer {padding-top: 20rem;margin-bottom: 0rem; }
Could someone inspect my website and look into the header.
The problem is that when the website transitions into mobile, the header doesn't seem to go full width - there are some margins around the left and right.
I would love to have some advice.
Thank You,
Website is: http://blackbird.marketing
When I inspect your website, I see your site set max-width: 90% at #media screen and (max-width: 760px) and max-width: 96% at #media screen and (max-width: 1200px); You should reset it.
You should not be asking about this, as a developer, you must have the skills or the initiative to try to fix this by yourself.
This is what is happening:
#media screen and (max-width: 760px)
body .pagewidth,
body.full_width .themify_builder_row .row_inner,
body.full_width .related-posts,
.full_width .post-nav,
.full_width .commentwrap {
/* max-width: 90% */
max-width: 100%; // <- change the 90% to 100%
}
You also have 2px padding on the right, either you wrap it into a media query or change the #headerwrap directly
#headerwrap {
/* padding-right: 2px; */
padding-right: 0px; // <- change 2px to 0px
}
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've been working on this for over an hour so hoping someone can help me figure this out!
I'm trying to get these images centered within mobile view, however, can't seem to get it work.
I've tried a variety of custom css, however, I'm stuck...
#media only screen and (max-width: 900px){
.fusion-column-wrapper {
padding-left: 25px !important;
}}
Here's the page I'm trying to figure it out on.
http://blisspaperboutique.com
You need to set the wrapping anchor tag and img both to display: block. Also, set margin: 0 auto on the img.
#media only screen and (max-width: 900px){
.fusion-column-wrapper a {
display: block;
}
.fusion-column-wrapper a img {
display: block;
margin: 0 auto;
}
}