I am new to CSS/HTML. I have created this website and I want it to look good on mobile phone as well. When I browse the website from my iphone it is scrolled out at max and the text from frow(first row -£20 voucher),srow(second row-at),trow(third row - £4.99) are very small, unreadable. What's wrong?
.frow {
font-size: 60px;
font-weight:900;
}
.srow {
margin-top:10px;
line-height:5px;
font-size: 45px;
font-weight: 600;
}
.trow {
color: #FF0000;
text-shadow: 2px 2px #000;
font-size: 100px;
font-weight: 900;
}
You will have to define the meta viewport in order to support mobile devices the way you want:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Include this in your <head>.
Modern mobile browsers usually scale the page down, if the viewport doesn't define something else. With the viewport, the page is not scalable (user-scalable=no) so it just looks like opened on a small window.
The next step would be, if not already made, making the page usable on small screen resolutions. In order to achieve this, CSS media queries might be helpful.
About the viewport meta tag: http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
About CSS media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Instead of hard coding the length, you can try out twitter bootstrap framework from: http://getbootstrap.com/, which can easily create mobile friendly layout.
Related
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
Firstly, I created style for Mobile view and here is the CSS.
.content>.hello{
font-size: 6vw;
color: white;
}
After that I change some style for desktop view
#media only screen and (min-width:600px){
.content>.hello{
margin-top: 40px;;
font-size: 5vw;
}
So, now when I uploaded the CSS to the server, I can see the media query works well on my laptop.When I resize my browser, it works well. But the problem is after I check the website on my phone, the media query also applied there. It supposed to have font size of 6vw on the phone.
Okay, it is solved. I added this meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and i forgot to update the html file to the server. Took me hours for this problem😩.
When I reduce the width of my browser window, I can see the font size changing.
Isn't that a cache problem ?
Is the phone screen really less than 600 pixels ?
I got into the habit in my link tags of introducing an unnecessary parameter, but I can change its value each time I modify the stylesheet.
<link rel="stylesheet" href=".../styles.css?v=17"/>
The thing is that you have two rules:
General rule
.content>.hello{
font-size: 6vw;
color: white;
}
This is applied to all devices.
Desktop rule
#media only screen and (min-width:600px){
.content>.hello{
margin-top: 40px;;
font-size: 5vw;
}
This is applied to desktop
Possible problems
since the rules have the same selector, therefore they have the same priority, in the case of desktop the one which runs later applies. You will need to either put the general rule before the media query, or transform your general rule to a media query of its own
your phone might have a width of 600px or more, you will need to check the dimensions of the phone in pixels as well
i just try, how about this :
.content>.hello{
font-size: 6vw;
color:white;
background-color:black;
}
#media screen and (max-width:600px){
.content>.hello{
font-size:5vw;
margin-top:50px;
}
}
<div class="content">
<div class="hello">
lorem ipsum dolor sit amet.
</div>
</div>
I have the below code in my css file:
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
font: normal 75% 'Poppins', sans-serif;
}
When I look at my website in portrait, it's fine. But then as soon as I rotate into landscape, my font scales up to the increased size. I want the font to remain completely as it is. The above code seems to have fixed the issue for many other people, but as you can see from my screenshots, the font is clearly larger in landscape when compared to portrait.
Screenshots below:
Portrait
Landscape
Turns out it wasn't strictly an issue with the font...it was a viewport issue:
<meta name="viewport" content="width=device-width, initial-scale=1">
Try splitting up your css font into:
font-family: 'Poppins', sans-serif;
font-size: 1.5em;
Check out the font-size documentation to see the difference between relative, percentage, and length values.
Well, I'm not sure I got the difference between mobile first and non mobile first responsive layout?
This is what I know, and probably something is not right:
Use Media queries with CSS (also for non mobile first layout)
Create a layout by starting from mobile and not from desktop version
I've saw there's a difference between bootstrap setting and foundation setting, is it important for that difference?
<!-- Bootstrap -->
<!-- I've read it's not mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Foundation -->
<!-- I've read it's mobile first -->
<meta name="viewport" content="width=device-width">
At the end that's all I know, is there something more to know about it?
Where i can find a good guide?
Just as it says....
"mobile first" and "non-mobile first" layout.
Mobile first means from the start, it is made to look how you want it to look in mobile. Then in most cases you then use min-width media query to adjust according to larger screen sizes.
Non-Mobile first means you design it for desktop or large screens first. Then in most cases using max-width media query to go back and make it look better in smaller/mobile screens.
I hear there are problems with browser's understanding min-device-width and max-device-width. Just use min-width and max-width.
If your designing a responsive theme, it is best to start mobile first.
Watch This Video: http://www.youtube.com/watch?v=-BVmrSG93XE
Article here provides important details.
What is mobile first?
Mobile first, from a coding perspective, means that your base style is typically a single-column, fully-fluid layout. You use #media (min-width: whatever) to add a grid-based layout on top of that.
The alternative – desktop first – involves starting with a wide, grid-based layout, and using #media (max-width: whatever) to scale down to a single-column layout.
Why mobile first?
iPhone and Android browsers are quite capable, but older smart phones, feature phones and other small-screen devices like gaming consoles may not support media queries.
Imagine trying to read tiny text in a big screen layout on an old, underpowered feature phone.
Mobile first web design extends progressive enhancement to site layout, allowing you to serve simple, readable content to all devices, and layer on structure and presentation for more capable devices.
An example of Mobile First from the latest Dreamweaver 6 Fluid Layout is as below -
/* Mobile Layout: 480px and below. NOTE: No Media Query line here*/
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.*/
/* NOTE: Now from here media query lines are added for Tablets and Desktop */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
Hope it helps.
EDIT: Another article here which explains above example with a little more details. Excerpt as below -
Progressive Queries
Since some older mobile devices may not support media queries at all,
bottling up the small version of your CSS rules inside a query may
keep it from recognizing what CSS it can render within it. Instead of
this, it may be a good idea to have the smaller version be the
"default", while adding in the additional CSS rules for larger screens
via media queries (since desktop browsers are more likely to recognize
the media queries).
Supporting IE and older browsers
css3mediaqueries.js
respond.js
With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-neeeded basis to platforms that can handle them well.
Look at:
http://www.slideshare.net/splashomnimedia/desktopfirst-vs-mobilefirst-web-design
Simple code, but in chrome font-size is always 12px, in IE it's 10px.
For px larger than 12, it's ok to change. But for px under 12, it cant be changed....how to fix this?
<html>
<head>
<style type="text/css" >
body{
font-size: 10px;
}
div{
margin: 0 auto;
border: 1px solid #000;
width: 60em;
}
</style>
</head>
<body>
<div>
wrapper
</div>
</body>
In chrome://settings/fonts, there is a setting for "minimum font size". You probably have that set to 12px.
You can adjust the size of text in chrome.
Click Chrome menu on the browser toolbar.
Select Settings.
Click Show advanced settings.
In the "Web Content" section, use the "Font size" drop-down menu to make adjustments.
see here
Try change size like this:
body {
font-size: 10px !important;
}
If it still doesn't work, you would probably have some javascript changing it on the fly (do you have some javascript plugins or code loaded with your project?
Or maybe css from other plugins/modules/code etc.
Or maybe you have really set some minimum font size in chrome settings. Try to check taht also.