Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
My website is not working correctly in the mobile browsers here is the link
the navigation panel is not stretching 100% not covering the about us section
when viewing in the browsers please take a look and suggest a solution thanks.
Let me explain:
1) You want to avoid hardcoded margins cos you never know what type of screen size the user has. Instead position your nav in the middle with automatic margins, like this:
nav {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 50px;
font-size: 18px;
font-family: helvetica;
}
2) Your nav now tries to fit its parent div (navbar), but navbar does not have a width set, so the width stays at 900px. But your #maincontain again has a hardcoded width of 1280px. Your images also have a width greater than 900px, this stretches your page to the biggest size but the navigation remains 900px therefore does not stretch.
3.1) Easy solution: set navbar to have: width: 1280px;
3.2) Correct solution: Remove the hardcoded width from your #maincontain, your images and anywhere else that stretches the screen.
3.3) In a long run, you will struggle to make a responsive website like that, I suggest using http://getbootstrap.com/ as a template, as its responsive, or learn how to use media queries to make your site responsive.
If this helped please UP the post and mark it as an answer! Thanks
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm currently making my website responsive and making sure it looks good on mobile/tablets. While doing this I discovered that my fixed navigation bar, with a width set to 100vw, don't cover the width of the page if I pinch-zoom out (a friend also informed me that the navbar didn't cover the width of his phone screen even before he zoomed out).
Before I zoom out:
After zooming out
I've tried finding a solution online but came up empty handed. I also tried changing my navbar from 100vw to 100% but the problem still stands. How could I go about fixing this?
Your width of the navbar is set at 100vw, which means 100% of the viewport is covered which is exactly your case because the navbar covers the whole screen before pinching it out.
Try setting your navbar width to 100% instead of 100vw.
Also, there is an issue with your image sizing which is why you are actually able to pinch out in the first place.
So correct your image dimensions or change your navbar width to 100%. Both should work.
Correcting the image dimensions is preferable.
If you are using something like Bootstrap, you don't need to add the width in the first place.
Please share the code if further clarification is needed.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I know this is a common bug but haven't been able to find the reason and to fix it with the usual solution of hide x axis overflow.
Can anyone tell me why there is white space to the right on small mobile devices such as pixel and iPhone 4? I haven't been able to replicate this on emulators. The problem occurs on mobile chrome and mobile safari and does not occur on firefox.
The theme I use is static home wordpress with "business page one" theme. Here is the link for the staging website
Any help would be much appreciated i'm not a web programmer just trying to finish my small wp site
Normally this problem is related to the following reasons:
The viewport is not set correctly (make sure that the initial-scale is set to 1.0.)
The body is not 100% for some reason.
There is some element overflowing (for example an image) that is expanding width (make sure that the overflow is hidden, or make sure that anything overflows the body width).
Try to inspect further with dev tools...
.site {
max-width: 100% !important;
}
.site-header {
max-width: 100% !important;
}
#site-header img {
width: 100% !important;
}
Add this css in Appearance -> Customize -> Additional CSS
let me know if this solves your problem.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am currently redoing my css and other stuff thats needed to make my adaptive site to a responsive - until now I designed my site for my laptop and then scaled down and now Im doing from the other side.
I have managed to get the site look ok in 319x480 and now Im gonna see where to make my first breakpoint: exactly how do you go about this? Should I only resize window horizontally and see where a break is needed or should I also do it vertically? From the tutorials Ive seen they always just talking about horizontally, but arent you missing some stuff then?
Also, now it looks good in portrait mode. Lets say I will make a breakpoint at 600px width for portrait and one at 1000px and thats it. Should I then after go back to 319x480 and flip to landscape and expand the site once again and find new breakpoints for landscape mode too?
How are you going about this in a methodical way? I think this is a really cool way to design and I really wanna learn how to do it right.
Thanks!
You want to use min-width media queries if you are doing mobile first. Desktop first uses max-width. Concentrate on width rather than vertical height like you were asking, if the browser window height is resized it is usually fine with the scrollbar. You don't want people to have to scroll horizontally usually.
Example:
.header-title {
font-size: 14px;
}
#media screen and (min-width: 600px) {
.header-title {
font-size: 16px;
}
}
#media screen and (min-width: 1024px) {
.header-title {
font-size: 18px;
}
}
All the main breakpoints you can check in browser console. Here you can see, that as a rule, only width changes. Probably, vertical resize won't influence your page that much
In general CSS break points are horizontally because responsive have a "flow" layout. For example, if you have a grid layout with 3 photos side by side and your browser gets too narrow display all of them, the should get stacked on top of one another so the view can scroll through them.
It's always a good idea to test your site at multiple sizes and aspect ratios, especially if you are using fixed/absolute position or calculating heights.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I cannot seem to find this anywhere yet it seems to simple.
I have a full width website using .container-fluid. The site is divided up into full width rows. I want the rows to be responsive in height. (if the row fills about half the viewport on a desktop, it shrinks to fill about half the viewport on a tablet)
I would highly appreciate explanations with sample code vs "here use this..."
Thanks!
You should think about using viewport units: vh
So, if you want a row to be half the height of the viewport, on any device it's on, use 50vh
jsFiddle Demo
It is for may solution. But one way is the viewport unit. This is a best way for the make responsive div height.
.row {
background: #c62222;
height: 50vh;
margin-bottom: 10px;
color: #fff;
font-size: 18px;
line-height: 50vh;
text-align: center;
}
<div class="row">HALF RESPONSIVE DIV</div>
<div class="row">HALF RESPONSIVE DIV</div>
Open this url:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm struggling a bit with this contact form on my site:
http://www.sandhtestsite.kaylynnehatch.com/contact-us.html
I'm trying to get it to work well with mobile (the rest of the site scales down using #mobile screen tags in the CSS).
The form itself is stacked so the fields don't need to float or anything, but I would like to have the container and textarea shrink down to better fit mobile screens.
I've tried using #mobile screen with the #contactus elements in the CSS but it doesn't seem to work. Any suggestions?
There are several issues that you are dealing with. Let's step through them one by one:
The contact form is loaded into an iframe, which complicates things unnecessarily.
The textarea has cols="50" set, which is extending the width off the side of the mobile screen.
fieldset is set to a width of 320px, in addition to the rule: padding: 20px. With the following CSS, the fieldset will be 360px wide.
#contactus fieldset {
width: 320px;
padding: 20px;
/* width (320px + (20px*2)) == 360px */
}
In addition, you may find developer tools such as Firebug or the Chrome / Safari Developer Tools indispensable for times like this. With these, you can quickly and easily highlight what elements are overflowing the screen, changing the CSS realtime, while you watch your design. It is a real timesaver.
Concerning cols on the textarea element, this question might be of benefit as well: sizing a textarea with CSS vs with cols and rows