I've created a HTML page and I'd like to make it responsive.
I've looked at the w3schools but didn't figure out how to make it responsive.
I've just add the line
<meta name=viewport content="width=device-width, initial-scale=1">
but it doesn't make the text responsive. I know I have to add something, but can't figure out what.
Here's my code:
<!doctype html>
<title>Test page</title>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; background: #eaeaea;text-align: center; padding: 150px;}
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>
</head>
<article>
<h1>This is a test page</h1>
<div>
<p>
Test page that I made for fun. I would like to be able to code. Send me an email (not working)</p>
<p>— Alessio</p>
</div>
</article>
EDIT:
At the moment I'm playing with the line
<meta name=viewport content="width=device-width, initial-scale=1">
Without this line, the entire text fit on a mobile device, but very small. So the page is zoomed out to fit the screen.
With the line, the text is a good size, but it doesn't fit the screen.
I need something so that I can keep the text size, but make it fit depending on the screen dimension.
I don't want to use library. I'd like to write the code directly in the page (if possible).
EDIT 2:
following the suggestion of #elhampour and #gavgrif I've investigated more the bootstrap. I'm doing a course at freecodecamp.com and now I'm understanding more about this suggestion.
At the moment the code is
<!doctype html>
<title>Coming Soon</title>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<div class="container-fluid">
<h1 class="text-primary text-center">We’ll be online soon!</h1>
<img class="img-responsive col-sm-6 col-md-4 col-lg-3" src="https://livetogether.xyz/images/LT-header-alpha-flip.ico" alt="livetogether.xyz">
<p>If you need to you can always contact us, we’ll get back to you shortly!</p>
<p>— LiveTogether Team</p>
</div>
Now I'm looking to make the text responsive
What exactly do you want to add? Comment on my question if the following does not answer your question.
First of all, html pages are already responsive. Your divs will change their size as the page's size changes. Text size cannot be made to fit the screen by default, however you CAN use a library like this: https://plugins.jquery.com/textfill/If you want to, you could have an event in your javascript which will fire when the document's size is changed, or when it is loaded, and it will customize your page for you, based on your input. This would be done by selecting elements individually and setting their .styles.Also, css code can be changed as the page is changed. Look into http://www.w3schools.com/css/css3_mediaqueries.aspGood luck with your project, and have a good day!
You will need to use media queries in your CSS to change the sizings etc in different viewports. The following will set the h1 to a 50px size on screens above 768px and to 30px for screens at or below 768px:
#media (max-width: 768px) {
h1 { font-size: 30px; }
}
#media (min-width: 769px) {
h1 { font-size: 50px; }
}
As mentioned by #elhampour - investigate Bootstrap and then you can change the layout as well as the sizes etc:
<div class="col-sm-6 col-md-4 col-lg-3">
<p>test content 1</p>
</div>
This will display as the full viewport of a mobile (col-xs-), half the width of a small viewport (tablet), a third of a medium viewport (laptop) and a quarter of the larger viewport (descktop screen).
Related
I’m a big fan of fluid typography and I want a website I’m developing to adopt it. Recently, I learned about the max() CSS Function. I thought of using it to get fluid typography. In particular, I want the text on webpages to start from a specific type scale and then to adopt a different one. To be concrete, I want the text to use the Minor Third scale on a small starting viewport. When the viewport becomes larger, I want the text to use the Perfect Fifth scale instead. I want to get a result like the one Utopia lets you obtain. There, you specify the two type scales you want to use on different viewports. I want to try to replicate the same effect, but using only the max() Function, since I don’t want to provide a “max viewport”: my text must scale infinitely. So far, I’ve tried using this code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 { font-size: max(2.488rem, 11.089vw); }
h2 { font-size: max(2.074rem, 6.854vw); }
h3 { font-size: max(1.728rem, 4.236vw); }
h4 { font-size: max(1.44rem, 2.618vw); }
h5 { font-size: max(1.2rem, 1.618vw); }
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
</body>
</html>
What this code does is using the max() Function for every heading, whose first member is the scale defined by the Minor Third scale, while the second one is the scale defined by the Perfect Fifth scale. To see what I’m taking about, try resizing the viewport after running the code snippet above and you’ll see the heading changing scales. I don’t know if this code does exactly what I’m trying to achieve (that is, to switch from a scale to another one), but it seems to. What I want to avoid, however, is the interval that occurs from, for example, the h1 and the h2 elements while they change when resizing the viewport. Specifically, the h1 starts adopting the new scale before the h2 does. This makes sense since the two maximum values calculated are different, but I’d like all my headings to start adopting the new scale at the same time, that is when I resize the viewport.
Here's how you might do it using media queries:
h1 {
font-size: max(2.488rem, 11.089vw);
}
h2 {
font-size: max(2.074rem, 6.854vw);
}
h3 {
font-size: max(1.728rem, 4.236vw);
}
h4 {
font-size: max(1.44rem, 2.618vw);
}
h5 {
font-size: max(1.2rem, 1.618vw);
}
/* tablet */
#media (min-width: 768px) {
h1 {
font-size: max(3.488rem, 16.089vw);
}
h2 {
font-size: max(3.074rem, 11.854vw);
}
h3 {
font-size: max(2.728rem, 9.236vw);
}
h4 {
font-size: max(2.44rem, 7.618vw);
}
h5 {
font-size: max(2.2rem, 5.618vw);
}
}
/* large screens and up */
#media (min-width: 1200px) {
h1 {
font-size: max(4.488rem, 30.089vw);
}
h2 {
font-size: max(4.074rem, 18.854vw);
}
h3 {
font-size: max(3.728rem, 16.236vw);
}
h4 {
font-size: max(3.44rem, 14.618vw);
}
h5 {
font-size: max(3.2rem, 10.618vw);
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
</body>
</html>
I made up numbers for the font size increase and you could add more browser viewport break sizes and even use rem values instead of px.
In the end, I found the best solution was to use something like:
:root {
--step6:calc(1.602rem + 5.063vw);
--step5:calc(1.424rem + 3.375vw);
--step4:calc(1.266rem + 2.25vw);
--step3:calc(1.125rem + 1.5vw);
--step2:calc(1rem + 1vw);
--step1:calc(0.889rem + 0.667vw);
--step0:calc(0.79rem + 0.444vw)
}
I use these CSS variables to specify the sizes of elements and let the text scale indefinitely, without the need to use media queries to specify precise points in which my design should change. I get the effect I was looking for with just the use of these variables. For example, an h1 element can use:
h1 { font-size:var(--step6) }
and an h2 element:
h2 { font-size: var(--step5) }
This lets me say: «I provide only the smallest values. When the viewport grows up, I want the sizes to scale indefinitely, using this ratio». Of couse, I use these variables not ony with font sizes, but also with other properties such as margins, paddings, etc.
Case 1: Without initial-scale=1.0
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
I open this page with Chrome on a desktop browser. Then I right click the page and select Inspect. Then I click the mobile icon in the inspector and select Galaxy S5 from the dropdown. I see this:
The same result is reproducible with Chrome on actual mobile phone. The <div> element is not as wide as the page.
Case 2: With initial-scale=1.0
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
body {
margin: 0;
}
.header {
background: green;
color: white;
height: 2em;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<p>
Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword
</p>
</html>
Here is the output now. The page seems okay when it loads but as we scroll right, we see that the <div> is still not as wide as the entire width of the page.
Output in both cases remain the same even if I add width: 50% to the .header in the CSS.
Question
Why does this issue occur? How can I fix it such that the <div> element is really as wide as the page and the entire long word is visible to the right (it is okay if the user has to scroll right to see the long word)?
You are dealing with overflow here; the element the text is in doesn’t extend its width - so child elements inheriting this width, don’t become wider either.
Solution (or workaround, depending how you want to see it) is to force such long words to break, https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
If you check the browser compatibility table further down that page, you’ll see that the value anywhere doesn’t have browser support yet, expect for Firefox 65+ - but for most cases, break-word should do.
(You can also check out the similar property https://developer.mozilla.org/en-US/docs/Web/CSS/word-break Sometimes a combination of both can lead to better results in older browsers.)
I currently have a responsive image on my website and when I view it on a mobile browser, I get a broken icon (NOTE: viewing on PC in responsive view works!)
HTML:
<div id="headerwrap">
<header class="clearfix">
<div class="container">
<h1><img src="assets/img/headerImage.png"></img></h1>
<p>Welcome to the site!</p>
</div><!-- /container -->
</header>
</div><!-- /headerwrap -->
CSS:
#media (max-width: 979px) {
#headerwrap {
margin-top: -120px;
padding-top:140px;
}
#headerwrap h1 {
font-size: 50px;
line-height: 60px;
letter-spacing: 2px;
}
#headerwrap p {
font-size: 18px;
line-height: 30px;
letter-spacing: 3px;
}
}
#media screen and (max-width: 30.6em) {
.cbp-qtrotator {
font-size: 70%;
}
.cbp-qtrotator img {
width: 80px;
}
}
When I load the page, the image LOADS then after a second or two switches to the broken link. This happens every-time the page is refreshed.
Troubleshooting done so far:
Made sure <meta name="viewport" content="width=device-width, initial-scale=1"> was present
Took the <img> tag out of the <h1> element, still didn't show up. Also moved the image outside of the headerwrap, still nothing
Removed most of the CSS regarding #media (max-width..)
Opened the page on PC, and changed the resolution to the same as my phone, result was that the image DID show up
Viewed the page in Desktop View on my phone, didn't show up.
If anyone can think of something I'm missing here, I'd really appreciate it!
As per #hellojebus the src of the image was being changed by a script I had running in the background.
Rather than the img src showing up as:
<h1><img src="assets/img/headerImage.png"></img></h1>
It loaded as:
<h1><img src="assets/img/headerImage#2x.png"></img></h1>
Resulting in a 404
Thanks again #hellojebus
i am just learning how to use bootstrap and media queries for the first time. I am trying to make some text get smaller when the screen gets smaller , however for some reason i am not sure why bootstrap does not do this, does this mean i need to use media queries ? or is there a function in bootstrap ?
HTMl:
<div class = "Logo">
<a class="navbar-brand" href="#">
<h1>Hello</h1>
<h2>There</h2>
<h3>You</h3><br/>
<p>Time To make a change</p>
</a>
</div>
CSS:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
}
I want it so that when someone was to launch it in an iphone etc the text which is in the navbar will just shrink and become smaller, but for some reason it is not doing it.
Thanks again for all the help , sorry if this is a basic question but just trying to understand bootstrap etc :)
I think you can just use:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
Logo.h1 { font-size: 80%; }
Logo.h2 { font-size: 80%; }
Logo.h3 { font-size: 80%; }
}
This will make it 80% of the original size.
Source: W3schools
you can solve your issue by simply adding 'viewport' meta tag in your html.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This meta tag scales your whole content according to the dimensions of the device the web page is currently being viewed on. You can find more about this tag here.
Many pages on sites I run have localised links in the form of http://www.site.co.uk/index.php#calendar. These work as expected - taking the browser to the calendar part of the web page index.php in IE and Chrome, however the newer versions of Firefox seem to have an issue in that they are only displaying the chosen id area on the page.
For example; I have a page with the following HTML content (assume name is index.php ):
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<meta charset="utf-8">
<title>Control Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="canonical" href="http://www.site.co.uk/avail/index.php" >
<!-- JAVASCRIPTS -->
<script src="/includes/js/jquery-1.11.0.min.js"></script>
<!-- STYLE SHEETS -->
<link rel="stylesheet" href="/includes/css/normalize.css">
<link rel="stylesheet" href="/includes/css/sitewide.css">
<link rel="stylesheet" href="/includes/css/control.css">
</head>
<body>
<main>
<nav>...</nav>
<h1>A Heading</h1>
<section>
<h2>Heading H2 one</h2>
<p>some text</p>
<p>some more text</p>
<p>Bulking text, etc etc etc.</p>
</section>
<section>
<h2><a id='text1'></a>Section 2</h2>
<p>some text</p>
<p>some more text</p>
<p>Bulking text, etc etc etc.</p>
</section>
</main>
</body>
</html>
So, when the page is visited at index.php then the whole page - 2 headers and 6 paragraph blocks - are displayed. When the page is visited with index.php#text1 only the second header and paragraph blocks are displayed on Firefox.
I have noticed this across several different sites on HTML5. Some points:
The rendering of the page only begins at the DOM level the id tag occurs. such as if the id tag occurs in a <section> then only that section and all parent elements are displayed.
This is not effected by the deprecated anchor name attribute.
This is not effected by where or in what element the id tag is positioned.
This effect does not seem to be influenced by CSS/JS base stylers such as normalize.css or bootstrap. There is a minor difference in modernizer where the page loads with the problem but then refreshing the page displays the whole page but does not focus the browser window on the id tag area.
When viewing the site through Firebug the entire site source code is present (but is not displayed), firebug also does not seem to show any display:none; that I have found.
My pages are W3C HTML5 valid according to the Nu-HTML checker linked from W3C validator.
So, to conclude:
After reading this can you tell me how to side step or even solve this issue? Or if there is some syntax mistake I've made that's causing this issue, What can I do to correct this behaviour?
Finally: A test page featuring the problem as it presents itself to me can be found here on a test site page: http://www.walberswick.org.uk/index.php
The problem seems to be with your css. On click you get some weird overflow bug in all browsers. I played for awhile with it and after changing these:
#media only screen and (min-width: 801px)
.leftSideText {
padding: 2px 2px 2500px 2px;
margin-bottom: -2500px;
float: left;
width: 48%;
}
#media only screen and (min-width: 801px)
.imgSideText {
padding: 1px 1px 2500px 1px;
margin-bottom: -2500px;
float: right;
width: 48%;
}
to these:
#media only screen and (min-width: 801px)
.leftSideText {
padding: 2px 2px 2500px 2px;
display: inline-block;
width: 48%;
}
#media only screen and (min-width: 801px)
.imgSideText {
padding: 1px 1px 2500px 1px;
display: inline-block;
width: 48%;
vertical-align: top;
}
all worked fine.
A thing to note. Use display: property instead of float: property or flexbox. Make sure to have only one main element per page and include it's role="main".