I'm trying to build a very basic site with an image centered in the middle of the page with three lines of text below it, also centered.
I have it how I want it to look on a larger screen, but when viewed on a smaller screen (iPhone) the image is too large. I need to have the image resize based on the screen resolution.
I've done some Google'ing and know this is possible, but have not been able to get it to work. HTML/CSS is not my strong suite. Any help would be much appreciated. Here is my code:
<html>
<style>
body {
font-family: 'Helvetica', 'Arial', sans-serif;
background: white }
section {
background: white;
color: black;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<IMG src="Logo.png" alt="Logo">
<br><br>
<h1><center><p>Email
<p><font color=B5B5B5>Phone Number
<font size=7> <p><i>Tagline</i></center></font>
</section>
</html>
You can use media queries. Try to add the following code in your CSS.
CSS:
#media screen and (max-width: 480px) {
img {
width: 400px;
}
}
Once the browser is at 480px, it will make the img width 400px. You can change these numbers to suit your preference.
You need to look into setting up fluid images, this will help you get started...
CSS Fluid Image Technics
Here is an example...
HTML
<section class="container">
<img src="http://placehold.it/750x250">
<div class="copy">
Email
<p>
<span class="phone-number">Phone Number</span><br />
<span class="tagline">Tagline</span>
</p>
</div>
</section>
CSS
body {
font-family: 'Helvetica', 'Arial', sans-serif;
background: white
}
.container {
bottom: 0;
left: 0;
height: 300px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.container img {
max-width: 100%;
}
https://jsfiddle.net/kennethcss/71a6mngh/
The image is centered (using absolute centering), and when you drag the browser in the image automatically adjust it's size...this is how fluid images behave (no need for media queries per se). If you still need a media query you can do something like this...
https://stackoverflow.com/a/39760016/4413798
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You need to add a max-width to the image:
img {
max-width: 100%;
}
just off topic: <h1><center><p>..</p></center></h1> is invalid. Just use <h1>..</h1> and style it.
<font> is also invalid and deprecated (just like center)
Try something as below, there were few error in your codes, you could style your HTML elements by adding style tag in your targeted HTML element or by adding external or internal CSS files. Well now to make it responsive use CSS media query as below, define breakpoints where you need your image to change.
#media screen and (max-width : 480px){
.......
.......
.......
}
#media screen and (max-width : 320px){
.......
.......
.......
}
body{
background:#fff;
}
#box{
width:70%;
height:300px;
margin:auto;
margin-top:20%;
}
#box > .bximg{
width:180px;
height:180px;
overflow:hidden;
margin:auto;
}
#box > .bximg > img{
width:100%;
min-height:100%;
}
#media screen and (max-width: 480px){
#box > .bximg{
width:120px;
height:120px;
}
}
<div id="box">
<div class="bximg">
<img src="https://source.unsplash.com/random">
</div>
<h1 style="text-align:center;margin:0px;">
Email</h1>
<p style="text-align:center;margin:10px 0px; "><font color=B5B5B5>Phone Number</font>
<p style="text-align:center;margin:10px 0px;"><i>Tagline</i></p>
</div>
You can use max-width for <img> element.
section img {
max-width: 100%;
}
You're going to want to take a look at media queries in the Mozilla docs.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
There's a link to help you get a better understanding of it but basically the web content will resize based on the size of the screen.
Related
I am new at HTML and CSS and I want to make a responsive header that contains:
logo picture with margin-left in pixels when full resolution
pogo picture must have it's full size when full resolution
navigation menu with 6 and width of 1500 when full resolution
No Bootstrap. What are your suggestion to accomplish that? What I have made so far is not responsive, on full size (width:1920px) measures are fine and it looks exactly how it should, but when I try to resize browser it is not in one row, even if I declare that div "inner" that contains them is width:100%, and both of them are also width:100%.
Code is something like this:
.inner{
width:100%;
}
.navigation {
display: inline-block;
float: right;
text-align: center;
padding-top:47px;
padding-bottom:27px;
max-width:1555px;
width:100%;
}
.navigation li{
display: inline-block;
width: 16%;
}
.navigation ul{
max-width: 1500px;
}
.wrapper-logo{
display: inline-block;
max-width:365px;
width:100%;
}
.small-logo{
max-width: 143px;
width:100%;
padding-left:220px;
}
<div class="inner">
<div class="logo-wrapper">
<div class="small-logo">
<img src="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
</div>
</div>
<div class="navigation">
<ul><li>......</li></ul>
</div>
</div>
Use media queries.
Here goes my Desktop resolution css
#media only screen and (max-width: 600px) {
/* Here goes my Mobile resolution css */
body {
background-color: lightblue;
}
}
You'll want something like the following for bullet 1
.small-logo {
margin-left: 10%;
}
#media only screen and (max-width: 600px) {
.small-logo {
margin-left: 0;
}
}
Bullet 2 I'm guessing should say Logo not Pogo. Based on the code provided .small-logo is your only logo so you'd do something like this.
.small-logo{
width: 100%
}
What does the navigation menu have 6 of? Columns? Buttons? Unicorns?
Set the inner class or preferably an id of the largest content div to the max I generally like to center the content and give some side white space so I put the basics in the comments.
.inner{
max-width: 1500px;
width: 100%;
/*width: 85%;
margin: auto 0;*/
}
Are you trying to have logo-wrapper and navigation horizontally aligned?
display: inline-block;
I'm really having a lot of trouble trying to recreate this Wix site with the goal of having the mobile & desktop website responsive with other content.
http://nl.wix.com/website-template/view/html/936?&viewMode=mobile
As soon as I use a different width the 30° moves to a different position,
which means the site isn't properly responsive. I have no idea how to fix this.
Here's my code:
HTML:
<body>
<div class="header">
<h1>30 °C</h1>
<div class="clearfix"><img src="./img/banner.png" alt="banner"> </div>
<p>Beginning application developer</p>
</div>
</body>
CSS:
.header {
background-color: #7A7CB1;
width:100%;
position:absolute;
top:0;
left:0;
}
.header img {
width: 62.5%;
margin-top: 2.5%;
margin-left: 6.75%;
float:left;
}
.header h1 {
position: absolute;
top: 30%;
left: 30%;
font-size: 200%;
}
.clearfix {
overflow: auto;
}
.header p {
margin-left: 6.75%;
font-family: Verdana, geneva, sans-serif;
font-size: 13px;
}
I want the 30° to be below the logo like it is in the photo, but the logo and the text should become smaller or bigger (responsive) if the width of the phone is smaller or bigger.
If you want the text to become larger/smaller on different device widths, you need to add Media Screens
Here is an example of a media Screen
#media only screen and (max-width:940px){ /* Tablets*/
h1{
font-size:12px;
}
}
What this does is when the max width of the device is 940px(Average tablet size). The h1's font size is set to a different size.
I'm doing a page with html and css . this page there is a header in the mobile version has a height of 80px and the PC version has a height of 150px and within the heading is a logo in the mobile version has a height of 70px and a width of 250px and version pc 85px 300px . The problem is that when I open the page in Firefox and inspect the header elements and logo has lower dimensions ace assigned , although the programmer tools appear validated the assigned dimensions.
*{
padding: 0;
margin: 0;
}
body{
min-width:300px;
margin: 0px;
padding: 0px;
}
.Wrapper {
max-width: 980px;
margin: 0px auto;
position: relative; background-color: #fff;
}
header{
background: rgba(51,20,10,0.95);
}
/* Mobile */
#media screen and (max-width: 979px) {
header{
display:block;
width:100%;
height:80px;
}
a.logo{
background-image:url(Logo_M.png);
width:250px;
height:70px;
position: absolute;
top:5px;
left:50%;
transform: translate(-50%, 0%);
}
}
/* PC */
#media screen and (min-width: 980px) {
header{
width:980px;
height:150px;
}
a.logo{
background-image:url(Logo_L.png);
width:300px;
height:85px;
position: absolute;
top:20px;
left:56px;
}
}
<div class="Wrapper">
<header>
<a class="logo" href="#"></a>
</header>
</div>
Hmm. A few things I would suggest :
stick to a naming convention when assigning class names, capitalized
class names aren't a popular choice
care about css specificity, it will come back and haunt you when
doing media queries as you will be in danger of overwriting styles
avoid using position absolute when doing responsive websites
you don't need "display:block" and "width:100%" at the same time,
display block already sets the width to 100%
avoid assigning both width and height to images, it can lead to image
stretching
I would tackle your problem this way :
.container {
max-width: 980px;
margin: 0 auto;
}
.main-header {
background:rgba(51,20,10,0.95);
height: 150px;
text-align: center;
padding-top: 5px;
}
#media(max-width:980px) {
.main-header {
height: 80px;
}
.main-header__logo {
height: 70px;
}
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<header class="main-header">
<a href="#">
<img class="main-header__logo" src="http://placehold.it/300x80" alt="logo" />
</a>
</header>
</div>
</body>
</html>
I hope this pushes you in the right direction.
I tested your code on Firefox 47.0 for Ubuntu. It seems ok,on mobile the logo is 250px/70px
Is there any way to make an image resize to the users screen size? (HTML/CSS)
I've tried Media queries, but they haven't proven very useful except for text I believe.
#media screen and (min-width:600px) {
#dick{
color: black;
z-index: 400;
position:absolute;
left: 58%;
top: 210px;
height: 50%;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:100%;
}
}
Simply making the width span as much as it can works.
img {
width: 100%;
}
You can define a class like resize-img and add this class to your img tag :
<img class="resize-img">
and then in you stylesheet :
#media screen and (min-width:600px) {
.resize-img{
width: 100px;
height:200px;
// and whatever else :d
}
}
#media screen and (min-width:1000px) {
.resize-img{
width: 300px;
height:600px;
// and whatever else :d
}
}
For image elements id.ot provides an answer. For background images, you can use this:
html, body, .column {
padding: 0;
margin: 0;
}
body {
background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw;
font-size: 10vh;
}
h2 {
font-size: 2em;
}
<h1>This is the header</h1>
<p>and some paragraph text</p>
Try to resize the window when using "Full page" view mode and see how the image resizes. If you don't care about distortion, you can even use
background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw 100vh;
By the way, vw and vh units can also be used to resize text (regarding your comment on id.ot's answer).
The header of my site is some text and a logo. The font used isnt standard so the text is image based.
I want the elements of the site to change with the size of the browser window. I believe this is called fluid design?
So I want the text and logo in the header to scale and be evenly spaced horizontally. There are 5 letters, then the logo, then 5 more letters. One more curveball, I want the logo to be dead center of the page at all times.
I've looked around and it seems there are multiple ways out there to do this. And all have their own caveats based on ever evolving functionality of html and css, I'm guessing more css than html.
So what would be the best way to do this as of June 8 2014? =P Obviously I want it to work in as many browsers as possible.
There are basically two ways to change your content depending on the screen size:
1. Use percents
If you have some elements which should change their size whenever the user changes the screensize, I would recommend using percents.
.content {
width: 90%;
height: 50%;
}
In this example the class .content will have always a height of 50% and a width of 90% - it will change its pixel-size whenever the user changes the screensize. You can create a very flexible layout with that.
2. #media-querys
If you want to change something more than sizes, you have a static layout or want to create something like a mobile version, css has a #media-query:
#media (min-width: 600px) and (max-width: 1000px) {
.content {
background-color: red;
}
}
If the screen-width is between 600px and 1000px the background-color of .content will change to red. Just put the changes you want the header to do into a #media-query like this and it will work perfectly.
You'll find a very good noob-tutorial for #media-queries at css-tricks.com
Okay I hope this is what you meant with your description of having your logo/type in center of page. Here's the jsfiddle I made for the solution.
here's the code
HTML:
<header>
<div id="wrap">
<div id="container">
<div id="logo"><img src="http://mattfrey.ca/img/springfarm/sf-preview2.jpg" alt="sample image"></div>
<div id="fiveLets">F I V E R</div>
<div class="clearFix"></div>
</div>
</div>
</header>
CSS
header { width:100%; padding:0; margin:0; }
img { height: auto; max-width: 100%; padding: 0;}
#wrap { width:80%; margin:0 auto; outline: solid 1px red; background-color:#ccc;}
#container { margin: 0 auto; width:50%; background-color:#fff; outline: solid 1px blue;}
#logo { width:49%;}
#logo img { background-color: blue; float: left; }
#fiveLets { font-size: 2em; margin-top: 1.35em; float: right; margin-left: 1%; width:49%; }
.clearFix {clear:both}
/*responsive changes*/
#media screen and (max-width: 600px) {
#fiveLets { font-size: 1em; } /*shrink text*/
#wrap { background-color: #666; }
}
}
#media screen and (max-width: 300px) { /*doesn't seem to respond--jsfiddle*/
#fiveLets { font-size: 0.75em; }
#wrap { background-color: #333; }
}
}
1) You have your header, logo and type.
2) the #container brings both elements (logo and type, both of which are floated) closer together, and is also centered to solve that issue.
3) when you adjust the browser width, the css for the #logo img will adjust automatically, but the type, you need to add some responsive css, using media queries.
The jsfiddle doesn't seem to shrink down to 300px, so you will have to test in your own browser.
Hope this helps!