I’m trying to adjust the @media ( min-width: 320px) and somehow it overrides the native css. I must have made a silly mistake in the css code. It works ok without the media query.
http://f13-preview.awardspace.net/groupeezz.dx.am/groupeezz5/index.html
@media (min-width: 320px) {
.home-header1 {
font-size: 20px;
margin-left: 30px;
}
.home-header2 {
font-size: 21px;
margin-left: 30px;
}
.home-text {
font-size: 16px;
}
}
That query will affect all screens bigger than 320px, which is virtually all screens, there are not many smaller than that.
Was that your intention? It does seem an unusual query to have.
oh ok… I was trying to use that for smaller devices like phones. What is the correct way to use this to make the website responsive for tablets/phones?
If you want css rules to apply only to smaller devices use a query with max-width, eg
@media screen and (max-width: 600px) {}
Rules within those brackets will apply only to screens less than 600px.
At what size you place a breakpoint will depend on your design, put it where it is needed. 320px is an unusual point to put it, because that is the size of the smallest phones.
You would use the min-width query if you take the “mobile first” approach to RWD.
Got it! Thank you so much. That makes sense now and its working. Thank you so much! Now I learned something =)
That’s what we are here for 
Another question. How would I adjust the tablet size?
The @media screen and (max-width: 600px) works for the phone size, but when i add @media screen and (max-width: 1024px) for tablet, it overrides that. So what is the correct way to use media queries for tablet/phone size. Including landscape/portrait orientation.
The media query with the narrower max-width should fall later in the cascade than the media query with the wider max-width so it overrides properties assigned in the wider media query.
Orientation should not be a major consideration. I believe that most devices report their viewport width when the page orientation changes. If so, all you have to be concerned with is the width of the viewport, not the height, and code breakpoints accordingly, if needed.
Your page should be as fluid as possible so as few media queries (breakpoints) as possible are needed.
In addition to Ron’s comments, it’s best to stop thinking about specific devices, such as phone, tablet, laptop, desktop, because they vary so much in size themselves. Add the media query breakpoints where your layout needs them. That is to make the design as fluid as possible, but if at any point while dragging the browser narrower, the layout fails, that is where you add a breakpoint to solve the issue, not at the size of X, Y, or Z device.
http://f13-preview.awardspace.net/groupeezz.dx.am/groupeezz5/index.html
I did some research after reading yours and Ron’s comments. I understand it bit better now. Last night, I kept using some weird media queries formats like min-width 320px, min-width: 768px, min-width 992px, and so on. Then I found people using @media screen and (min-width: 768px) and (max-width: 1024px) and some even added some -webkit ratio stuff or something. Really confusing…
Anyways I limited the amount of media queries to only 2. I understand now that I only need to use media queries if I needed it. I thought it was frustrating and weird why I even including so many different media queries in the first place and it didn’t work and it just overrided with each other.
Right now the site is looking ok, but I would much rather like the text to be lower for the portait orientation on both samsung/iphones, but I had it higher to fit the text nicely on the homage for the landscape orientation. How do I make changes to the portrait and move the text slightly lower without altering the landscape orientation?
Also the Mailing list form is looking ok, but when I maximize the screen from 1025px to 1199px, the subscribe button shifts and theres a big gap? I just tested it on my ipad and the subscribe button is overlapping the email address form on landscape and overlapping the zip code form on portrait. I don’t know what I did, but it worked earlier.
**(for the subscribe button)**
@media screen and (max-width: 1024px) {
.btn-ml {
margin-left: 200px;
}
}
@media screen and (max-width: 767px) {
.btn-ml {
margin-left: 100px;
margin-top: 20px;
}
}
**(for the mailing list forms)**
@media screen and (max-width: 1024px){
.form-group-email {
margin-left: 85px;
margin-bottom: 20px;
margin-right: -30px;
width: 45%;
}
.form-group-zip {
display: block;
margin-left: 20px;
}
}
@media screen and (max-width: 767px){
.form-group-email {
margin-left: 0px;
margin-bottom: 20px;
width: 100%;
}
.form-group-zip {
margin-top: -20px;
margin-left: 0px;
width: 100%;
}
}
**(for the text on the homepage)**
@media screen and (max-width: 1024px){
.home-header1 {
font-size: 24px;
margin-left:70px;
margin-top: 250px;
}
.home-header2 {
font-size: 25px;
margin-left: 1px;
}
.home-text {
font-size: 17px;
width: 50%;
margin-top: 30px;
}
}
@media screen and (max-width: 767px){
.home-header1 {
font-size: 19px;
margin-left: 20px;
margin-top: -50px;
}
.home-header2 {
font-size: 20px;
margin-left: 1px;
}
.home-text {
font-size: 17px;
width: 70%;
margin-left: px;
margin-top: 30px;
}
}
You are making the same mistake again and you don’t need to think in terms of portrait or orientation or device. What you are solely interested in is the available width that you have to show your design. A landscape version is just a wider screen.
Therefore all you need to do is create a media query at the point that you want your text to move lower. Look at the design on a desktop and then slowly close the window as the layout compresses there will come a point when as you say you want the text to be lower down to make it look better. Throw a media query at that width and adjust to suit.
Landscape or portrait is irrelevant they are just wider or smaller views as you would get by opening and closing the desktop browser. If perhaps you were building an app for mobile devices then you may want to be more specific but for general responsive design you don’t need to know about devices or orientation. Just make your design fit at all widths with a few well chosen media queries.
My partner is working on the media queries part foe the homepage. I’m still having issues with the subscribe button for the media queries. It was working on the ipad even when viewed on the browser and then I changed something and it messed it up completely including the forms.
It looks ok on local server, but not ok on the live server?
nevermind the subscribe button works now. My partner did something weird with it and messed it up. I was wondering why it wasn’t working and it worked for both landscape and portrait for the ipad versions before. I don’t know exactly what she did but I plug in my old code in there and it worked. =)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.