I have 3 media queries in my CSS which seem to work fine when I resize the browser, but don't when I use the responsive design tool from the inspector ("toggle device mode") and on mobile phones.
Here is part of my CSS :
#media screen and (max-width: 1500px) {
body {
width: 100%;
}
}
#media screen and (max-width: 1200px) {
body {
width: 100%;
}
#slider_container {
float: none;
padding-top: 2em;
width: 75%;
display: block;
overflow: hidden;
padding-left: 0px;
margin-left: auto;
margin-right: auto;
}
#slide_desc {
//
width: 30%;
display: block;
float: none;
margin-top: 0;
margin-left: auto !important;
margin-right: auto;
overflow: hidden;
font-size: 1.3em;
color: #353535;
/* line-height: 2em; */
text-align: justify;
font-family: georgia;
width: 80%;
}
}
#media screen and (max-width: 768px) {
#slider_container {
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 1em;
}
#menu_button {
display: block;
width: 2em;
float: right;
margin-top: 0.5em;
margin-right: 2em;
cursor: pointer;
}
#top_menu {
overflow: hidden !important;
height: 3em;
/* background-color: gray; */
}
#top_menu>ul {
margin-top: 3em;
width: 100%;
height: 0;
position: absolute;
z-index: 100;
overflow: hidden;
}
#top_menu>ul>li {
margin: 0;
/* background-color:red !important; */
width: 100% !important;
display: block !important;
}
#top_menu>ul>li>a {
text-align: left;
width: 100%;
margin-left: 0;
padding-left: 1em;
height: auto;
}
#slides_container {
display: none;
}
}
The first 2 media queries always work fine, but the 3rd gets ignored. The 3rd media query only works if the browser itself is resized below 768px.
I know there are other similar questions, but are mostly related to the use of !important, or misplacement of the queries. My queries are at the end of the file, and what's strange is they do work if the browser is resized.
Any ideas why this might be happening?
You need to set your viewport meta tag to content="width=device-width, initial-scale=1". This tells the browser to render the width of the page at the width of the device's screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default).
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width value which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.
You can read more about the viewport meta tag and how it works here.
Because you have a syntax error:
#slide_desc {
//
Double-slashes are not valid in CSS.
Related
I am having an issue with the web page display on iPad. The last div jumps out at the bottom when viewed in iPad (landscape mode). See screenshot below
Here is the CSS.
div .container-home
{
float: left;
width: 290px !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I would really appreciate any help.
Many thanks!
Are you including a viewport?
Its because of float left and the width of them together is more than the display. You define their width for 290px and also a padding of 20px which means they're 330px and you will need a display width of 1320px at least.
Try using a gridsystem for them or give them a width value in per cent.
If you don't know what gridsystem to use, I recommend Skeleton because it is very light.
EDIT: Don't use !important because then you cannot change the value anymore !important will overwrite any other rule
Don't use hard value for width, example
div .container-home
{
float: left;
width: 20% !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I know a decent amount of HTML, CSS, Jquery, and PHP. But when it comes to making a responsive web page I'm really new to it. So basically in my basic web page called 'colors.html' i have 4 divs. The 4 colors are yellow, blue, red, and green. So understanding what a responsive web page is supposed to be i did all my positioning and heights and widths in %'s. All my positioning is placed within a body that is relative, and all the elements inside it are absolute. It looks like it works fine, and i set a min-width to the all the divs so that when a user resizes the browser window it doesn't all scramble together. Am i doing this correctly or is there a much better way to do this?
<!doctype html>
<html>
<head>
<title> Test </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="colors.css">
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('#red').click(function() {
alert('Red');
})
$('#green').click(function() {
alert('Green');
})
$('#blue').click(function() {
alert('Blue');
})
$('#yellow').click(function() {
alert('Yellow');
})
</script>
</body>
</html>
body {
margin: 0;
position: relative;
}
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#yellow {
position: absolute;
width: 20%;
height: 10%;
background-color: yellow;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 20%;
min-width: 150px;
}
#red {
position: absolute;
width: 20%;
height: 10%;
background-color: red;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 5%;
min-width: 150px;
}
#green {
position: absolute;
width: 20%;
height: 10%;
background-color: green;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 20%;
min-width: 150px;
}
You can use Media Rule to make responsive for each resolutions... it may be a litte bit too much work. but it will do work for u...
for example:
make new .css file call it whatever u want to. responsive.css
You will use all your tagst (div, ul, li, etc)... include it in ur html file in to tag...
well, for ecample you have:
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
in Media Rule tag it will look like:
#media screen and (max-width: 699px) and (min-width: 520px) {
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#red {
}
.div {
}
}
#media screen and (max-width: 1000px) and (min-width: 700px) {
}
so u have to do it for each tag... dor a desctop, table, phone screen.
#media screen and (max-width: 1680px){
}
#media screen and (max-width: 1600px) {
}
#media screen and (max-width: 1440px) {
}
#media screen and (max-width: 1400px) {
}
#media screen and (max-width: 1366px) {
}
#media screen and (max-width: 1360px) {
}
#media screen and (max-width: 1280px) {
}
#media screen and (max-width: 1152px) {
}
#media screen and (max-width: 1024px) {
}
until 480px or lower. i don't know how small screen do u need.
Hope this will help you :)
The biggest problem of your concept, in my opinion, is that position: absolute is commonly used to render items out of the normal flow of the page. They are rendered above the page. This is how you place a drop-down menu, a tooltip, a modal window, a drawer that slides over the content or a mega-menu.
Placing all your content outside the normal flow just because you can is not particularly useful, since you don't actually need the functionality of placing elements outside the flow. You don't have a flow!.
When you start thinking about a layout you shouldn't think about CSS at all. All you should ask yourself is: how will my page be rendered on different sizes and proportions of screens?:
huge screens, with width so big all your paragraphs would be rendered as 1 liners (> 75em)
large screens: desktops, large laptops (62em > 74.9em)
medium devices: laptops/tablets (48em > 61.9em)
small devices most smartphones, tablets (34em > 47.9em)
very small screens (up to 33.9em)
After you come up with some display rules for various screen sizes and proportions, you should write them in order, from small to large or from large to small:
Example (large to small):
// CSS for very large screens
#media (max-height: 74.9em) {
// CSS overrides for large screens
}
#media (max-height: 61.9em) {
// CSS overrides for medium screens
}
#media (max-height: 47.9em) {
// CSS overrides for small screens
}
#media (max-height: 33.9em) {
// CSS overrides for very small screens
}
Another good practice is to aim to write as little code as possible. For example, instead of writing the same properties for each color, like you did, it would be better to make a class that holds all the common properties of your colors and apply it to all color divs.
.color {
position: absolute;
width: 20%;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto, sans-serif;
cursor: pointer;
border-radius: 5px;
min-width: 150px;
}
and than write in each #{color} {...} the specific properties for that particular div.
Keep in mind that, before using it, you should load a font-family, like Roboto to make sure it renders on all devices even if it's not installed.
#import url(https://fonts.googleapis.com/css?family=Roboto);
You should also specify a generic font-family type, just in case there is an error downloading the font file, so the browser renders the page as close to the original as possible.
Other than that, the only advice I have is: always test your CSS on all screen sizes and in at least 3 major browsers before going live.
Best of luck!
Good luck!
I have a simple website that I am making for my music over at (secure tunnel) http://79a6b00f.ngrok.io using media queries and everything, with the meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">)in the header on index.html.
I have had someone test it on their phone, and the website zooms out, instead of maintaining scale and showing a hamburger menu. Here's my query code:
#media all and (max-width: 2600px) {
.w-ctrl {
width: 950px;
margin: auto;
}
}
#media all and (max-width: 966px) {
.w-ctrl {
width: 100%;
margin: auto;
}
.sub-header {
width: 100%;
background: #37474F;
height: 500px
}
.lnd-con .pic {
height: 500px;
background-attachment: scroll;
}
.lnd-con .label-con {
top: -350px;
text-align: center;
}
.label-con .title {
font-size: 25px;
}
.label-con .subtitle {
font-size: 25px;
}
}
#media all and (max-width: 636px) {
.w-ctrl {
width: 100%;
margin: auto;
}
.nav-con-big {
display: none;
}
.nav-con-small {
display: block;
}
.lnd-con .pic {
height: 300px;
}
.title-con {
display: none;
}
.lnd-con {
margin-top: 0px;
}
.lnd-con .label-con {
position: static;
text-align: left;
background: transparent;
padding-top: 5px;
padding-bottom: 8px;
letter-spacing: 0px;
}
.label-con .title {
font-size: 20px;
}
.label-con .subtitle {
font-size: 18px;
}
.sub-header {
width: 100%;
height: 400px
}
}
I could not fit my website into a js-fiddle, so I created a tunnel instead. I hope it's okay, as far as I am aware I'm not breaking any rules.
I see this declaration at the top of your global.css:
#viewport {
zoom: 1.0;
width: extend-to-zoom;
}
take it out or set width: device-width;:
#viewport {
width: device-width;
}
also, support for css device adaptation is pretty poor (http://caniuse.com/#search=%40viewport), possibly it is somehow conflicting with the meta tag implementation
You have to show us what meta viewport tag your using for #1. There are many.
But also; if you'd like to see the changes within your browser you can always write the media queries as between 2 widths as below:
/* SAMPLE No greater than 900px, no less than 400px */
#media (max-width:900px) and (min-width:400px) {
.CurrentlyOnVacation {
display:none;
}
}
I have a block of text inside a div tag that looks great on the desktop, but when you shrink the page for mobile and the div's get stacked, the text does not wrap and just trails off the side. I am not very experienced with this, but I'd really like to learn how to fix this.
My CSS for the div
#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}
My HTML on the page
<div id="homemain">
[rev_slider home_small]
<h2>[title size="2"]Explore Our Services[/title]</h2>
Text text text, texty text, lots and lots of stuff about our services and what we do. We really want you to use our services and what not. We're the best.
</div>
This is a page inside WordPress btw, if that makes much difference here. I did not create the page, just inherited it and tasked with fixing it because I'm the most "techie" person in the office. Lucky me! Any help on this would be helpful.
The problem is that you want a responsive layout, yet you're using a non-responsive approach. Remember that in order to get a responsive layout, you need to think it in terms of non-fixed sizes (%, rem, etc)
So, in your code, where you have this:
#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}
You should change it to :
#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
max-width: 100%;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}
However, if you need to have that 600px width on desktop, then you can use this:
#media handheld, only screen and (min-width: 767px) {
#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width:600px;
max-width: 600px;
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}
}
and for smaller screens:
#media handheld, only screen and (max-width: 767px) {
#homemain {
line-height: 15px;
background-color: transparent;
height: 500px;
width:600px;
max-width: 320px; /* or whatever size you want */
float: left;
padding: 10px;
font-size: 100%;
margin: 10px;
word-wrap: break-word;
}
}
This way, by using media types, you can have more control over your layout on different sizes
The issue you're seeing (I suspect) is that #homemain is still displaying as 600px wide, even on screens which have a screen-width smaller than 600px.
What you need is for #homemain to be full-screen-width on screens narrower than 600px but no more than 600px wide on screens wider than 600px.
Try something like:
#homemain {
[...]
width: 99%;
max-width: 600px;
[...]
}
I have this url:
oios.kemne.com
when I visit this in the mobile I get this:
The relevant html segment is as follows:
<div class="focus">
<div id="f_image">
<img src="/assets/6112e42e/images/man.jpg"></img>
</div>
<div id="text4">
<div id="f_heading"></div>
<div id="f_tex1"></div>
<div id="f_tex2"></div>
</div>
</div>
is the container.
is the image holder.
is the header.
is the column 1.
is the column 2.
The relevant css styles are as follows:
#f_image {
width: 35%;
height: 111px;
float: right;
margin-top: 12px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
.focus {
height: auto;
background-color: #DCDDDE;
float: left;
margin-top: 20px;
margin-right: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#text4 {
width: 60%;
height: auto;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_heading {
width: 80%;
height: 30px;
font-size: 15px;
color: #1A6EB4;
margin-left: 10px;
margin-top: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex1 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex2 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 20px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
As can be seen from the mobile (note3), the styles are completely messed up. The image spill over the containing div and the heading overlap the column1.
If I remove the width attribute from the #f_image, then the image fits inside the containing div (.f_focus). But the problem is that, it affects the rendering in desktop browser. I can probably use two separate stylesheets for desktop and mobile. But then it would require a lot of rewriting and duplication and the styles would be scattered. More importantly, the logic of the layout is very simple - the image is 35% of the containing div. So if the containing div resizes in the mobile or any other screens, then the image should resize automatically. The fact that removing the width fits the image inside the containing div also bears testimony that there are enough room to accommodate the image. For the rest of things, ie the overlapping of the header with the column, I am not quite sure of the reason of it failing.
I am completely clueless. I even tried to debug the mobile version using firefox remote debugger. So please help me with resolving this.
Many thanks in advance.
You can use the CSS3 #media-queries over here. I don't know the width at which you'd like the mobile styles to take over the desktop styles but just for an example, I am using 768px as the width after which the mobile styles will take over the desktop styles.
#media (max-width: 768px) {
#f_image img {
width: 100%;
}
#f_heading {
height: auto;
}
}
Please place the above styles at the bottom of your stylesheet and then try viewing the website on your mobile device or try resizing your browser window to less than 768px.