I am trying to create a fluid layout that adapts to different screen sizes...
It works on the desktop with no issues, but on a tablet or a cellphone the body overflows and creates a horizontal scroll bar.
Click here you can see the problem
I already have checked all the elements and their padings and margins, and that doesn't seam to be the issue.
Used to this css for desktop scroll remove
footer.css line no 55
.infolinksbottom{
margin-left:5%; // remove this line
margin-left:0; //add this line
padding-left:5%; // add this line
box-sizing: border-box; // add this line
}
Problem is with the way css propertiese set for the class **.bottomlong**. You will need to manage min-width more precisely. Currently min-width is set to 120px so that's one of the prime reason that its giving Horizontal Scrollbar. Either you get less than 120px min-width or put float:left; for .bottomlong.
I observed you are not using BREAKPOINTS. The best practice would be to use breakpoints to achieve your result over different devices.
Here are few of the most commonly used break-points
#media screen and (max-width:959px){
/*your css classes*/
}
#media screen and (max-width:640px){
/*your css classes*/
}
#media screen and (max-width:320px){
/*your css classes*/
}
You may like refer GOOGLE DOCS FOR BREAKPOINTS for more detailed information.
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
Hello I am trying to create a responsive layout. I want the buttons I have created to be fit somewhere on the left side. But when I load it on my mobile phone (sideways) it does not show all the buttons as I cannot scroll down. I don't want to have to scroll down. Can I make the size and/or spacing of the buttons dependent on the screen size?
Thank you!
http://farah-sean.samanthaongphoto.com/index2.html
For responsiveness you can use 2 methods.
Or you base your CSS style based on percent and your layout will fit on the size screen, or you can define CSS rules based on screen size with CSS property #media
See exemple bellow from W3C #media
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Defining various #media for different screen size will make your layout responsive.
I'm setting breakpoints in css using '#media only screen and (max-width: 500px)'.
When I set it to change colour upon reaching the breakpoint it works:
#media only screen and (max-width: 500px) {#container{color:black;}}
the container div does go black when I resize the browser, however when I set the breakpoint to change the margin of the div the breakpoint is not triggered.
So when I set the query to:
#media only screen and (max-width: 500px) {#container{margin-left: 0px;}}
nothing changes when the screen is resized in exactly the same way as when I resized when testing for colour change.
the main css file sets #container at margin-left; 18% and when this is changed manually to 0px it does shift the document all the way to the left of the viewport
I've tried various different styles and html elements but colour changes seem to be very reliable, they work in pretty much any combination, but resizing divs or repositioning does not seem to work at all. Why might this be?
Answer:
I was putting my #media query at the head of my css file , when I moved it to the foot of the css file it now resized. It leaves the question though, why did it change the colour at the head of the file but not resize?
You can change margins just as reliably as you can background colours through media queries.
See this for example:
http://jsfiddle.net/Q55MC/
#container {background: blue; margin: 50px; width: 200px; height: 200px;}
#media only screen and (max-width: 500px) {
#container{background:black; margin: 0px;}
}
Try creating a demo so that people can have a better idea about what your trying to achieve.
It looks like the 18% style is taking precedence.
Try to override it with this:
#media only screen and (max-width: 500px) {#container{margin-left: 0px !important;}}
Would the #viewport meta declaration help?
Elegantly Resize Your Page With the #viewport CSS Declaration
be aware that this post uses #-viewport when it should just be #viewport
I am using Foundation. The top-bar (navigation) break out on some 787x676 resolution while resizing the window. I have cut/paste the code but issue was still there. Then i checked on foundation official website top-bar breaks on there website website too. I think there is some bug in foundation. Here is the link/screenshot. Is there any fix to this?
Depends on what you mean with fixing, it breaks when the size gets too small to hold all the content, so one could add a min-width to make sure it doesn't get smaller than that.
Example:
.top-bar {
min-width: 800px;
}
Or you could have it overflow, and just grow in height as content gets dropped below. To do so start with removing:
.top-bar {
height: 47px !important;
}
That line makes the black bar stay as high as it is.
To swap to the mobile bar sooner, look for bits similar to #media only screen and (max-width: 767px) and increase the size to just above where it breaks, example (max-width: 780px)
I use media query and i want content on my web page be responsive.
is this code ok?
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
.navmob{margin-top:0px; margin-left:-100px; margin-right:100px !important; }
.sidebar { display: none; }
#navmenu {margin-top:10px; margin-left:auto; margin-right:100px; }
.content {width:auto; height:auto; margin-left:100px; margin-top:-50px;}
.contentsing{ width:500px; height:auto; margin-left:auto; margin-right:auto; margin-top:-50px !important;}
body{
background-image:none !important;
background-color:#000000 !important;
font-size:12px !important;
}
}
and why content is not responsive... Here is example
Here is code of my index
There is allot of bugs i found in console. Any way i cannot solve all of them but i can tell you, you need to work on width when you make a template responsive. These are some css line from i try to manage your template, Hop that help you
Put them as it is
#media(max-width:714px){
.posts .post-item{width:96%}
.text5{width:100%}
#navmenu ul{width:90%}
}
If you are testing your responsiveness by resizing your browser, device-width will not take effect. This is because the width of your computer screen does not change.
Use max-width/min-width. It targets the rendering area on the screen, therefore, when you resize, the CSS will take effect.
device-width targets the screens resolution.
max-width/min-wdith targets the screens rendering area.
This is the wrong way to go about a responsive website. You need a series of media queries to cater for:
desktop 1024px
ipad 768px
iphone 320px
Once you have these breakpoints set up the site will respond as expected, all content needs to be set to % in terms of width so it can adjust accordingly. Also do not use px use em for font sizes as this will auto re adjust for you.
Look into using a front end framework such as bootstrap as this does a lot of the hard work for you by using a 12 column grid layout system.