Is there a way so if a user changes there screen size to less than a certain pixel e.g. 1025px the div will then be scrollable?
I have had a search but I cannot seem to find anything.
Yup
#media only screen and (min-device-width : 1025px) and (max-device-width : 1024px) {
/** STYLES FOR SMALLER SCREENS HERE **/
body { padding:0px; }
}
Im not sure but I feel like it would come automatically as long as scrolling isn't disabled for your div and the position isn't fixed.
Related
I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
I am new to coding and I have created a website with lots of margin and padding values. So is there a logical way to make it responsive?
Margin and padding shouldn't really matter when it comes to making a responsive site. To make a site responsive, one of the big things is working on making the site width's into percentages. Also, finding a good framework can help a lot. I would suggest looking into bootstrap or foundation.
http://getbootstrap.com/css/#overview
You need to apply new margins and paddings inside Bootstrap breakpoints.
Pick only the one you need.
Some tips how to reduce amount of responsive code:
Group elements which resize in the same way with one classname, then apply new sizes only for the group of the same classname.
Apply responsive size for columns, like col-xs-12, col-sm-6, col-md-4
Don't re-style all elements for every breakpoint, if you don't have to. Check if a website is looking good on a big screen, then resize browser and restyle only this elements which break on a smaller screen.
Reduce the number of breakpoints to minimum, for example: 1. mobile devies, 2. tablets, 3. desktops.
css:
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I have an animation on ipad things go from -200px to 1500px and are hidden in a browser with overflow-x:hidden.
When I look on ipad I can scroll "off screen" and see the hidden items even though the body and html and set to width:100% and height:100%.
How can I fix this in ipad?
You might use media querys for the Ipad Viewport.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
You could try to put the animation in a div that is not wider than the screen. Then apply overflow:hidden; on that div.
Try like this:
html, body {
position:relative;
}
our site is not responsive, and one of the requirement is to render the images on mobile devices so they fit the screen and we are running into a problem, becasue different sized images are uploaded to a web page
And this is what our CSS code looks like
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: 214px !important;
}
}
So this works fine for 600 X 400 images, because the aspect ratio is the same. However, when we have a different size images, say 400X578, the above CSS code won't work and the images look really stretched and distorted.
What is a good solution here, since I am no front end Dev.
Any help is appreciated.
Thanks
Modify your CSS to the following:
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: auto;
}
}
This will allow you to specify the width of the image and the height will automatically adjust itself proportional to the width.
I am working on ryan.tylerdetmers.com/cmd
I want the div in the middle to resize to fit peoples screen sizes. So whether you're on an iphone or a desktop, it fits it properly. I also want the contents within that div to resize.
I am not sure if I have to do something to each individual piece, or if there is something out there that would do this for me in an easier fashion.
Please help.
Thank you
This is called responsive design. With this, your website adjusts it's size according to the device that opened it.
First you have to include this in your HTML:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
More about viewport here.
And in your CSS, some of the common media queries:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Here you should set what size you want your div to be
when viewed on smartphone */
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
Full list of media queries here
Use the viewport units specified in CSS3, first you have to set the viewport meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Then in CSS (without using media queries) set the width of the div or whatever element you have to 100vw (i.e. 100% of the viewport width), and you can then set child elements as percentages to retain responsiveness.
make
style="height:66.67vh;"
It should resize the window when your original window is resized.
You can calculate screen height & width and set height and width for your DIV.
//Calculate screen height and width
var winWidth=$( window ).width();
positionFromLeft=(winWidth - divWidth)/2;
positionFromRight=(winWidth - divWidth)/2;
This should work for all resolutions.
Now you can set div position from left and right.Now your div will appear in center.