I made a website on my laptop, it is my first for University.
I really enjoy it, in just 3 days I gained a good amount of knowledge of HTML and CSS and made a navigation bar, and 3 simple boxes with images/information we had to do.
Little did I realise, is that the resolution will not stretch or adapt to other screens. I opened it on my PC and the monitor is 1080p, so my right text box had a wide gap in between it and the middle box. My banner at the top also was as it would be seen on my laptop, but not the width of my screen.
#banner {
background: url("../images/background.jpg") no-repeat center;
background-size:100%;
width: 1920px;
height: 200px;
min-width:700px;
max-width: 1920px;
If I make a width and height like this, will it adapt to the screen? Also, do I NEED the width and height if I include a minimum and max? An idea to make just this banner fit well would be a good answer, as I'll use the answer to edit my other elements.
I recommend using percentage with height and width (width: 100%) rather than static sizes. It will help with different screen sizes as well as changing the size of your browser.
Edit: simple demo here
HTML:
<div id="test">
<p id="par">
Hello world!
</p>
</div>
CSS:
#test{
width: 50%;
}
#par{
width: 100%;
background-color: pink;
}
If I make a width and height like this, will it adapt to the screen?
No, px units represent fixed widths. You can use percentage units to let element have x% of it's container width or height. Another option, less common also, is to use vw and vh, wich represent a percentage of the viewport's width and height respectively.
For your use case a width: 100%; height: auto will do. The image will expand to fill it's container and the height will change dynamically to allow the image to maintain it's aspect ratio.
However, a banner for a regular desktop with aspect ratio 16:9 or 16:10 will never look good in mobile. You may need to use media queries to show different images based on viewport width.
Take this as an example:
.banner {
width: 100%;
}
#media (min-width: 600px) {
.banner-mobile { display: none; }
}
#media (max-width: 599px) {
.banner-desktop { display: none; }
}
<img class='banner banner-desktop' src="https://placehold.it/600x200?text=imma_desktop_banner"/>
<img class='banner banner-mobile' src="https://placehold.it/200x200?text=imma_mobile_banner"/>
Demo
https://codepen.io/nicooga/full/pPWyJx/
Notice how resizing the window changes the banner shown.
Read
https://www.w3schools.com/cssref/css_units.asp
https://developer.mozilla.org/es/docs/CSS/Media_queries
I would set the banner width to 100%, background-size to 'cover' for the image to fill the banner area with its position centered:
#banner {
background-image: url(http://placehold.it/1200x800);
width: 100%;
height: 200px;
background-size: cover;
background-position: center center;
}
You can play with the fiddle: https://jsfiddle.net/piotku/u4zdLkyw/1/
Related
Struggled for a solution the first time so I am posting again with more info. Thanks in advance for your feedback.
On the website I am building at the moment I have 2 background images set to 2 different divs but they need to line up perfectly on all devices.
At the moment the background images line up at 1920px wide and smaller but once you start going larger than that it starts shifting.
Please could someone help?
Please see an image here that it should resemble
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
#media only screen and (min-width: 1921px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
}
#media only screen and (max-width: 1200px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
background-size: cover;
}
.mc-key-points {
background: none;
}
}
<div class="productTopSection g-py-200">
<!-- Content Goes Here -->
</div>
<div class="mc-key-points g-py-200">
<!-- Content Goes Here -->
</div>
#media only screen and (max-width: 767px)
.productTopSection {
background-size: cover;
height: 200px;
min-height: auto;
}
since then there is no content i think the above is the way.correct me if i'm wrong
Your example does not work, well, it doesn't matter, I'll try to understand you
First he trumpets to understand how it works
The blue frame is your div in full screen mode (one element for the whole page)
since the div has no height, you give it a min-height or fixed height (height property) in your case it works the same with only a background and until you put something in the div
At this stage, you need to understand that the height you specify does not affect the height of the image itself, that is, the min-height will not change until you put a lot of text in it (this is just an example, you can put whatever you want that has a height)
In the image I have demonstrated the background-size property with 100% auto value.
from the documentation we see that we set 100% width and leave the height on auto also by default the bakcground-image has the same position (background-poistion: 0% 0%)
If you write it all like this:
background-size: 100% auto;
background-position: 0 0; // this is not required as this is the default, I am just using this as an example
we will get the result as in the picture above, where the picture will be stretched in width relative to the screen
well now we reduce the width of screen (div automatically starts changing width and taking the width of the screen)
what do we see? there is an empty space below! In your case you set the height to 100% and the width automatically
background-size: auto 100%;
and yes, you shouldn't use multiple background image syntax in your case
background-size: auto 100%, cover; // you have one background image
This is what your non-working result looks like:
Note that I can see that you are using center positioning, so you have two holes! With what I congratulate you!
What should you do? You must use an image (html img tag) instead of a background
Example:
<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
img {
display: block; // Remove inline native space
width: 100%;
}
</style>
or use media to control the div's height (use vh instead of pixels or css media queries)
<style>
div {
/*.....*/
-webkit-background-size: 100% auto;
background-size: 100% auto;
min-height: 60vh;
}
/* OR */
div {
/*....*/
min-height: 875px;
}
#media screen and (max-width: 1024px) {
div {
min-height: 500px;
}
}
</style>
While it's not clear to me if you were planning to crop the image sides on mobile, I think this may help out at least - for something like this I think you can make it much easier by using an <img> tag in HTML instead of background-image in CSS.
The problem is getting the height to scale proportionally to the width so that the images retain their aspect ratio. What's happening in your code is the height is effectively being set to 895px with the min-height, it will not go higher unless you add enough content to the div.
So starting with mobile screens, your height is still 895px and the sides of the images will be cropped less and less until you reach 1920px in width (the image width). Once you go over this the image will start to stretch wider to cover and the top/bottom will start to be cropped. That top/bottom cropping while the images are centered is what causing the edges in the image to not line up. Because you're now lining up say 20% up on the top image to 20% down on the bottom one when you planned for 0% to line up.
So how does the <img> tag make this easier?
It adds content width/height to your container and allows the container to expand to fit the content, or force the content to shrink to fit in it. if you just throw an img in a div you'll see it expands the div out to the dimensions of the img.
But if you set the width to 100% on both the container and the img, it will fill the width of the container. The key being that the height will be proportionally set to maintain the aspect ratio and the div will expand in height to fit the img height needed and you will not have any top/bottom cropping so edges will line up.
Then you just need an absolute positioned container over the img to put your text content wherever you want.
If you were trying to crop the image sizes on small screens (which I think would look better). I'd suggest you use media queries there just to set some breakpoints where maybe the image is 120% width on phones and center - you'll still have that height though so if it's too high and you need to crop to bring the height down, I do have an idea for that but don't want to scope creep too much...
Here's an example with <img> - much less going on here and more straightforward IMO. And you gain more control - you can tweak this a lot to crop however you want at different media queries.
.productTopSection, .mc-key-points {
position: relative;
width: 100%;
}
.responsive-img {
width: 100%;
}
.overlay-content {
position: absolute;
/* just to get started with the content positioning */
top: 50%;
transform: translateY(-50%)
}
<div class="productTopSection g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
<div class="mc-key-points g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
I want to design Metro User interface with HTML and CSS , and I want the boxes height change in difference devices. I use percentage for width . I know that it can be use for height too . but if I use percentage in height , if you shrink the browser vertically the height will smaller and bigger .
another problem is , if use multiple monitors together for viewing desktop , the width will be very bigger than the height , so the boxes will have smaller height and bigger width.
is there an efficient way for make a responsive web site in my situation?
Note : I don't want to have a vertically scroll .
any suggestion or experience of making responsive in an efficient way?
thank you
Start with vw to get the desired height in proportion to the view width for small screens.
Then, after the viewer exceeds a certain width - 1080px in my example, introduce a fixed height to the element using a media query.
This makes the element work well with both small and extra, EXTRA wide screens and the vertical size of the viewer wouldn't have any effect on it
#logo {
height: 26vw;
width: auto;
}
#media screen and (min-width: 1080px) {
#logo {
height: 300px;
}
}
<img id="logo" src="https://s.w.org/about/images/logos/wordpress-logo-notext-rgb.png">
Try like this:
div {
/* 25% of viewport */
height: 25vh;
width: 15rem;
background-color: #222;
color: #eee;
font-family: monospace;
padding: 2rem;
}
<div>responsive height</div>
*{
margin:0;
padding:0;
}
.side-box {
background:red;
width:250px;
height:100vh;
}
<div class="side-box">
</div>
I have a site here: http://ideedev.co.uk/newseed/design/ and the banner at the top works great and just how I want it to - the banner image it 100% width of the site and the text floats in the middle and centre at all sizes.
However, for smaller mobile devices, I want to adjust the height of the image, so it scales down and keeps the ratio of the image in tact with the text still sticking in the middle. Can anyone help?
My HTML is here:
<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
<div class="centerd1111">
<h1><?php the_title(); ?></h1>
</div>
</div>
My CSS is here:
#absolute1111 {
position:relative;
width:100%;
height:50%;
display:table;
color: #fff;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% !important;
}
.centerd1111 {
display:table-cell;
vertical-align:middle;
text-align:center;
height:500px;
padding: 0 50px 0 50px;
}
Many thanks :)
Using image as a background image won't allow you to scale down image with screen size as you have to adjust the height manually to scale down the image which is not a good practice.
Using the image in HTML browser will be able to scale down the image, keeping the aspect ratio intact.
In your case, you can use media query for mobile to adjust the image height so the whole image scales down and the full image is shown.
Here is the code for the same:
#media only screen and (max-width: 500px){
.centerd1111 { height: 180px; }
}
Let me know if this works for you.
Thanks.
instead of background css attribute, you can put the image as element, in this way, you can manipulate it more easier. this if my fiddle. but for this fiddle, I only make it for mobile, so you need to apply this to #media query for mobile display.
https://jsfiddle.net/bdv2L0a0/
this fiddle, I made it that, the image's height will follow its proportion when the display becoming smaller
.background img {
width: 100%;
height: auto; //default value, no need to declare this
}
If you know the ratio of the image (proportion between height and width), you can do this:
.your-container {
overflow: hidden;
height: 0;
padding-bottom: 46.406570842%; /* image height / image width */
}
This is the trick used to embed iframes that maintain ratio in different viewport sizes. It's based on the fact that when you give a percentage value to padding property, it applies this percentage to the element width.
Also, you don't need to give display: table to center the text. You can just do this:
.your-container {
text-align: center;
position: relative;
}
.your-centered-text {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
See this jsfiddle.
The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?
here is the website... (takes a bit to load up)
http://rhwebdesign.co.uk/
Here is my CSS:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.
You have:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.hero-logo img {
max-width: 100%;
min-height: 100%;
padding: 20px;
}
In order to scale the logo, add in to the latter block:
max-height: 100vh;
This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:
max-height: calc(100vh - 68px);
It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.
<div class="container hero-content" style="margin-top: -97.5px;">
have a look in main.js for this function:
heroContent.css({
"margin-top" : topContentMargin+"px"
});
Which is this:
topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),
I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.
My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.
Edit:
You need to be more specific with your css. Learn some more about css specifity. You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.
You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.
So at the bottom of your style sheet, try this.
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:940px !important;
}
#media (max-width: 480px) {
.hero-logo img {
max-width:55%; /*looks nice at 480 */
padding:20px;
}
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:320px !important;
}
}
#media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:480px !important;
}
}
But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.