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
}
Related
i'm new to html and css and i've been having a few issues dealing with media queries.
Basically, i have a website that only "actually works" when its been visualizated in a 1920x1080 resolution, so i created a few media queries on my css to support other resolutions as well. I'm having a little bit of trouble on making a media querie to support the 1280x1024px resolution. When the browser is not on fullscreen, on windowed mod, none of my changes written in the css are applied. But when i go fullscreen, everything works just fine.
Also, i cant set 1280 width for this cuz it'll mess up my other media querie which was created for the 1280x768 resolution
Can anybody help me with this please?
Appreciate it.
This is how it looks on windowed mode, with none of my changes written in the CSS applied
This is how it looks on fullscreen, now, its actually doing what it's supposed to do
#media screen and (height:1024px) {
.white_round_background{
margin-left: 320px;
height: 170vh;
width: 160vw;
background-color: rgb(197, 183, 183);
}
.menunav {
left: 38%;
top: 4%;
}
.system_selection {
margin: 420px 0 0 0px;
height: 95px;
}
#logo_sliding_menu {
margin-top: 710px;
}
}
Hum... Just a guess at this point, but pay attention to that: the sequential order of css code matters.
You can have a lot of media-queries definitions, but they have to be in a specific order (from the highest to lowest). EG:
#media only screen and (max-heigth: 600px) {}
and only then
#media only screen and (max-width: 500px){}
ALSO, instead of just a specific height, maybe try to use the max-height property (which will be applied to devices having a resolution small than that height. Because aiming just one height of 1024px will not work on windows being 1023px height or less or 1025 or more...
.yourClass {
/* CSS applied to all devices above 1024px height */
}
#media only screen and (max-width: 1024px){
.yourClass {
/* CSS applied to all devices smaller than 1024px height */
}
}
#media only screen and (max-width: 955px){
.yourClass {
/* CSS applied to all devices smaller than 955px height */
}
}
#media only screen and (max-width: 500px){
.yourClass {
/* CSS applied to all devices smaller than 500px height */
}
}
/* And so on */
You can also play with min-height and max-height in the same query :
#media screen and (min-height: 400px) and (max-height: 900px)
{
.yourClass {
/* CSS applied to all devices
no less than 400px height and no more than 900px height */
}
}
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; }
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 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 have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)
After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.
As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .