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.
Related
I am creating a website and I want to have a link or a button in the middle of this image
PC Image
the link/button needs to be in the center of the PC screen and say "Start Learning" when the link/button is clicked it will link to another page. I have tried creating this on my own and am trying to make the website responsive but when I am at 100% browser width the link is perfectly centered and when i minimize the browser the PC Image stays at 100% width which is good and responsive but the "Start Learning" link wont stay centered on the image and minimize with it, the link just jumps around the page.
use vw(% of the viewport width) for your font size it will scale the size of your font and I set some css for your code that makes your button responsive and centered even if you resize your browser width.
.banner-inner
{
width:100%;
height:100%;
position:relative;
text-align: center;
}
.centered
{
position: absolute;
margin: 0 auto;
width:100%;
height:auto;
display: block;
text-align:center;
font-size:6vw;
left:0;
right:0;
top: 50%;
transform: translateY(-50%);
}
.centered a
{
margin: 0 auto;
color: #000;
text-decoration: none;
padding: 20px;
}
.img
{
width:100%;
height:auto;
display: block;
margin: 0 auto;
object-fit: cover;
}
<div class="banner-inner">
<img class="img" alt="" src="https://img00.deviantart.net/080b/i/2014/360/d/3/texture_13_by_sirius_sdz-d19qqe1.jpg">
<div class="centered">Start Learning</div>
</div>
I had to make a few changes to your style to make it responsive.
Your Centered class has a margin left and right set to auto to center it horizontally. We made margin top a % so it will decrease as the image does.
We also used display flex to center everything. and set a font which will decrease via media queries. I also added a width of 100% to the image and an auto height.
The CSS
#media only screen and (max-width:1000px){.centered{font-size:12pt!important;}}
#media only screen and (max-width:800px){.centered{font-size:11pt!important;}}
#media only screen and (max-width:600px){.centered{font-size:10pt!important;}}
#media only screen and (max-width:400px){.centered{font-size:9pt!important;}}
#media only screen and (max-width:200px){.centered{font-size:8pt!important;}}
.banner-inner{
width:100%;
height:100%;
position:absolute;
text-align: center;
color: white;
}
.centered{
position: absolute;
margin-left: auto;
margin-right: auto;
width:100%;
height:auto;
margin-top:20%;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-size:12pt;
}
.img{
width:100%;
height:auto;
float:left;
}
The HTML
<div class="banner-inner">
<img class="img" alt="" src="img/Website PC.png">
<div class="centered">Start Learning</div>
</div>
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.
I have a static HTML website that works perfectly, apart from the footer. Essentially, the footer is an image in which has text overlap. When the screen size is changed, the elements on the page move with it to fit the screen. Except for the footer text. I cannot workout what i am doing wrong and fairly positive that this is something so simple i've missed.
Here is a diagram of what is happening and what i need it to do:
So, the text box (in white for demo purposes), is aligned with the left box/edge above. Even when the screen enlarges and shrinks, i need the text to remain in line with that 'marker'.
However, when i enlarge the screen, you can see that the white box above moves, yet the text does not go with it!
The code for the footer is as follows:
<div class="orangeFooter">
<img src="images/orange-footer.png">
<h2><span class="orangeText">Promoting a knowledge based NHS</span</h2>
</div>
And the CSS:
.orangeFooter{
margin-top:40px;
width:100%;
position:relative;
height:133px;
}
h2 .orangeText{
background:#fff;
padding:7px;
font-size: 40px;
}
.orangeFooter img{
width:100%;
height:100%;
}
.orangeFooter h2{
position:relative;
font-style:italic;
left: 210px;
bottom:80px;
font-size: 40px;
}
Use this CSS:
.orangeFooter h2 {
position: relative;
font-style: italic;
/* left: 210px; */
bottom: 80px;
font-size: 40px;
display: block;
margin: 0 auto;
width: 1016px;
}
It makes the h2 1016px wide (which is the width of your site). it also centers it in your site (with the margin: 0 auto;)
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).
I am designing a webpage that does not adjust itself as per the screen resolution. It looks OK on higher resolutions but on 1024x768, only the left side of the page is visible. I have tried out putting the whole thing in a container and aligning it to the center but it doesnt work. What would be a way out?
Here's a bit of the HTML:
<div id="layer-container" style="position:absolute; background- image:url(images/bkgrd_final.jpg);">
<div id="info-layer" style="position: absolute; text-align: left; left: 0px; top: 2px; height: 747px; z-index: 48; display: block; margin:0 0 0 -285px;" title="">
And here is some CSS:
div#container {
position:absolute;
margin:0 auto;
text-align:left;
overflow:visible;
}
body {
font-size: 8px;
line-height: 1.1875;
text-align: center;
margin: 0;
background-color: #0C0C0C;
background-repeat: repeat-x;
background-position: center top;
color: #000000;
overflow-x:hidden;
}
I would sugest you add mediaqueries with styles for smaller devices.
#media only screen and (max-width: 768px) {
even better: go "mobile first" by designing you page for mobile devices. then add media-queries with extra styles for bigger devices.