The dev site is located at http://www.clhdesigns.com/cliwork/wintermeresod/about.php
The issue I'm having is if you take a look at the home page the background images scales perfectly while on the about us page it doesn't at all. What I'm looking for is a 100% scale down here is the code that I have.
<div id="main" class="about">
<div class="inner">
<div class="welcome_intro2">
<h1>Growing Top Quality Sod</h1>
<h2>for over 25 years</h2>
</div>
And now here is the corresponding CSS
#main { float:left; width:100%; padding:1em 0 3em 0; color:#666;}
.about {
background: url("../images/banner3010.jpg") no-repeat;
height:582px;
width:100%;
}
What I'm looking for is to keep the height of the image in the desktop where it is but I need it to be 100% responsive. Any ideas?
Take a look.
.about {
background: url("../images/banner3010.jpg") no-repeat 50% 50%;
height:582px;
}
here is a SCREENSHOT of how it works. I have used the same code that has the image in the first page and this is what made it responsive. Check code below
.about {
background: url("../images/banner3010.jpg") center center no-repeat;
height:582px;
}
You can use #media queries for tablet and mobile phone image height
#media screen and (max-width: 768px) {
.about {
height:300px; /*whatever height you want*/
}
}
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 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 am trying to create a box over a dark background to show a picture over the content (as many sites do). There should be a dark color filling the screen (OK), a box centered on the screen (OK) with a 1em space between the box border and the picture. The picture can be portrait or landscape, and should be resized so it doesn't exceed either 90% height and width (keeping ratio). I am trying to do that purely in CSS/HTML, without javascript (if possible) My goal
Here is the code I currently have:
HTML:
<div id="picture_viewer_container" class="picture_viewer_container">
<div id="picture_viewer_content" class="box">
<span id="picture_viewer_content_close">Fermer</span>
<div id="picture_viewer_content_picture">
<img src="data:image/jpeg;base64,xxx">
</div>
</div>
</div>
CSS
.box {
background-color:#F6E9F7;
border:1px solid #E298EA;
}
.picture_viewer_container {
position:fixed;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index:1000;
align-items: center;
display: flex;
justify-content: center;
}
#picture_viewer_content {
padding:1em 1em 1em 1em;
position:relative;
}
#picture_viewer_content_close {
position:absolute;
right:0;
top:0;
}
#picture_viewer_content_picture {
display:inline;
}
#picture_viewer_content_picture img {
max-width:90%;
max-height:90%;
}
Current issues:
a landscape picture gets more than 1em of margin on the left and right side, but proper margin above and below
a portrait picture ignores the max-height and is bigger than the screen.
Use auto with your CSS img height.
#picture_viewer_content_picture img {
max-width:90%;
height:auto;
}
If you need other solutions, something like adaptive-images may be something to look into.
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!