Simple one probably. I've made a webpage and now need it to be responsive to a mobile at 375px;
In the html I have added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
My two columns are named in the html as follows:
#columnleft {
float: left;
width: 50%;
text-align: center;
background-color: #E8F8F5;
}
#columnright {
float: right;
width: 50%;
text-align: center;
background-color: #F4ECF7;
}
<div id="columnleft"> ..... </div>
<div id="columnright"> ..... </div>
I know i need to make a media query like this
#media screen and (max-width: 375 px)
But nothing is working. The largest size is 1024 px only these two sizes matter for this project. Nothing in between. I need the two columns to stack up on top of each other rather than side by side
Any advice much appreciated, thanks
make their width 100%
#media only screen and (max-width: 357px) {
#columnleft, #columnright {
width: 100%;
}
}
Related
I'm experiencing some problems with my two stylesheets.
I've been trying to make my website mobile friendly so I created a separate CSS file for mobile. Like so:
<link rel="stylesheet" type="text/css" media = "screen" href="css/services.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type= "text/css" href="css/mobile/services.css"
media ="only screen and (max-width: 500px)" />
Except I've run into a problem with overiding the main CSS file with the mobile one for a specific problem (only one part is not overriding; everything else is fine).
In "css/services.css" (the main one) I have:
#pricing{
margin: 0px;
}
.pricing_tables{
width: 600px;
margin-bottom: 100px;
}
And in "css/mobile/services.css" (the mobile version) I have:
#pricing{
width: 270px;
}
.pricing_tables{
margin: 0 auto;
width: 270px;
margin-bottom: 30px;
}
Basically, I can't change it to have a smaller width. But I haven't run into any problems until now.
The element I'm trying to change is a table. #pricing is the also set at width:270px
Thanks In Advance!
Is there any reason why you wouldn't simplify your life and combine your two stylesheets into one?
See if this helps you:
http://codepen.io/panchroma/pen/BpNMvz
CSS
#pricing{
margin: 0px;
}
.pricing_tables{
width: 600px;
margin-bottom: 100px;
}
#media screen and (max-width: 500px) {
#pricing{
width: 270px;
}
.pricing_tables{
margin: 0 auto;
width: 270px;
margin-bottom: 30px;
}
}
I have two logos: one for small screens and one for large ones.
Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
height: 76px;
float: right;
}
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
height: 76px;
float: right;
}
}
</style>
However, this only gives me the smaller logo when the width of the window is below 1199px.
If I expand the window to 1200px or above I receive nothing.
Both images are valid because swapping their position allows me to call either one, but never both.
Can any of you tell me what is wrong with my code?
When using mobile first approach (min-width) the smaller values come first, so your code would be:
.zachery_div {
height: 76px;
float: right;
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
}
}
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Note that meta tag shouldn't be inside style tag. but inside head before style
And since you had repeated properties, I put them outside of #media as they are "standard" across the code
I have some CSS that makes the whole site content have a marging to the left and right with 5em.
.content {
margin-left: 5em;
margin-right: 5em;
}
However, I want the margin to NOT work(not have a margin) or only have a margin with 1em when I enter the site on a mobile phone or touchpad. I have tried the following code but nothing happens. More specificly, I want this to be activated, and have no margin or only margin on 1em, on the screens that uses the initial scale I have set on every page. And I suppose that its only phones and pads.
#media screen
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
#media print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
#media screen,print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
You can use a media query with a specified width to achieve that :
#media (max-width: 640px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}
See here common device width to choose the width you want : http://mydevice.io/devices/
Also don't forget to include the viewport meta in your <head></head> tag to make it works on your phone :
...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
The syntax that you are using for media query is incorrect.
One must specify the width at which the media query will trigger in other words the width on the screen at which the code inside the media queries that will overwrite the default code.
the syntax for the #media property is
`#media not|only *mediatype* and (*media feature*) {
CSS-Code;
}`
So you must use this code to achieve the desired results :
#media (max-width: 667px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}
My classmates and I are trying to figure how to make this code be completely mobile friendly. We tried using #media screen but it did not work. We want to make this happen with HTML and CSS.
HTML
<!--List Content Start-->
<div class="listcontent">
<div class="listnumber">1</div>
<div class="listtitle">This div tag emphasizes the title.</div>
<div class="listpic"></div>
</div>
<br><br>
<!-- List Content End-->
<div class="listcontent">
<div class="listnumber">2</div>
<div class="listtitle">This div tag emphasizes the title.</div>
<div class="listpic"></div>
</div>
</div>
CSS
.listcontainer {
width: 100%;
height: 100%;
}
.listcontent {
width: 500px;
height: 400px;
margin: auto;
background-color: #F5EFEF;
padding:5px;
}
.listnumber {
width: 50px;
height: 50px;
float: left;
background-color: #B33638;
padding: 5px;
color: white;
font-size: 45px;
text-align: center;
}
.listtitle {
width: 425px;
height: 50px;
padding: 5px;
float: right;
background-color: #fff;
}
.listpic {
width: 100%;
height: 335px;
margin-top: 65px;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* 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 */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Here is the fix I created for you in terms of your coding snippet: JSFiddle
.listcontainer {
width: 100%;
height: 100%;
}
.listcontent:first-child {
margin-bottom: 40px;
}
.listcontent {
max-width: 500px;
min-width: 320px;
width: 100%;
height: 400px;
margin: auto;
background-color: #F5EFEF;
padding: 0;
}
.titlewrapper {
width: 100%;
}
.listnumber, .listtitle {
display: inline-block;
}
.listnumber {
width: 50px;
height: 50px;
background-color: #B33638;
padding: 5px;
color: white;
font-size: 45px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.listtitle {
height: 50px;
line-height: 50px;
padding: 5px;
background-color: #fff;
white-space: nowrap;
width: calc(100% - 70px);
max-width: 100%;
}
.listpic {
width: 100%;
height: 335px;
margin-top: 65px;
}
<div>
<!--List Content Start-->
<div class="listcontent">
<div class="titlewrapper">
<div class="listnumber">1</div>
<div class="listtitle">
This div tag emphasizes the title.
</div>
</div>
<div style="clear:both;" />
<div class="listpic"></div>
</div>
<!-- List Content End-->
<div class="listcontent">
<div class="titlewrapper">
<div class="listnumber">2</div>
<div class="listtitle">
This div tag emphasizes the title.
</div>
</div>
<div style="clear:both;" />
<div class="listpic"></div>
</div>
</div>
Ok so let's dive in, what are the reason for all these CSS and HTML changes?
To make something mobile responsive you need to consider the behavior it needs to have. When it comes to element widths, a general rule of thumb is the following.
CSS code example:
.some-wrapper-element {
width: 100%;
min-width: 320px;
max-width: 100%;
}
This makes a wrapping element, such as your .listcontent to become responsive with and without media queries being used. Note how I applied this throughout the CSS to give elements which needed to resize as the page resized, a dynamic width.
Your HTML layout needed a little more thought behind it. You are trying to horizontally align two elements and make them responsive. I will admit this is not a straight forward and easy to implement solution, but there are standard things to look at:
A wrapping element to ensure horizontal alignment occurs.
A CSS rule to keep the elements in line, such as display: inline-block or float: left, or a combination... the implementation depends on what works for you.
The elements to be horizontally aligned and made responsive, need to fit next to each other. This is important and it is the reason for all the added CSS code. See a very good reference here: How to place two divs side by side where one sized to fit and other takes up remaining space?
Media queries..., my rule of thumb is: does x element need to change responsively in a way which cannot be done with CSS styling first? Such as hiding/showing an image on certain screen widths, then your answer is yes please. Otherwise think of our layout first, how to make it responsive first and last how to use media queries for the things you cannot make responsive.
The <div style="clear:both;" /> code that was put there. That exists only to help separate your title section from your image section. It is another layout sugar I put there for you, because it will help keep things in place and separate content that does not need to be mixed. Awesome right!
line-height: 55px; This is simple: if you have text inside a small element (like the one you have) and you want it to look well, center it using line-height that is equal to the element's height. I did this just because I thought it looks nice, but change it if you think it is unnecessary.
Anyways, I hope this helps let me know if you have any questions.
The listcontainer should have the fixed width, while the listcontent fill them by 100%. All you have to do then is just fill the media querys like this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px) {
.listcontainer {
width: 100%;
height: 100%;
}
}
This way the site will have a fixed width for desktop usage, once the browser is too small to display the entire page (in this case 1024px but that depends on the page - in your example probably 500px) it will go to 100% dynamically, which is the most common approach. I can't tell you all of the media querys, since it depends on the developer to decide what the bevahiour should look like.
If you want to have a really mobile friendly site I recommend you using a framework like bootstrap - it does most of the job for you and you'll learn exactly how media querys are working and how you are supposed to use them properly.
Okay, I've got it resizing nicely for devices using a media query. Now I need to reproduce this on a browser resize. Is it possible using only CSS? I'm trying to avoid multiple named divs for scalability (i.e. add another change the min-width etc and it'll still work)
Yes, this may well have been asked before (I really have hunted), but there's just so many ways of framing the question...please indulge me .
The media query with viewport turns the divs into columns of a specific size.
But how on earth do I do this during a browser resize?
If you view this result on device via Chrome inspect etc my point will be abundantly clear.
Thanks all!
#Page {
margin: 0 auto 20px;
width: 98%;
/*1000px*/
background-color: lightgray;
}
#content {
margin: 0 auto 10%;
width: 96%;
background-color: green;
max-width: 1100px;
}
.col_content {
float: left;
margin: auto 1%;
width: 30%;
background-color: pink;
min-width: 225px;
}
#media only screen and (max-device-width: 768px) {
#Page {
background-color: white;
}
#content {
max-width: 400px;
background-color: green;
}
.col_content {
float: none;
margin: 1%;
/*5px*/
width: 100%;
background-color: pink;
}
}
<div id="content">
<!--Content-->
<div class="col_content">
1
</div>
<!--end col_content-->
<div class="col_content">
2
</div>
<!--end col_content-->
<div class="col_content">
3
</div>
<!--end col_content-->
</div>
<!--end content-->
Try changing:
#media only screen and (max-device-width: 768px) {
to
#media screen and (max-width: 768px) {
I use the above on my website and it works on browser resizes and on devices.