I am currently developing the footer of a web page in HTML / CSS. This footer will contain a lot of elements (address, links, buttons, ...) and it must, therefore, be responsive. Consequently, on a desktop version, we have all the footer's elements on a row and, then on mobile we have all the footer's elements on a column (as the following images show you);
My goal is to get the result below on a widescreen (desktop):
And here is the result I want to achieve on a mobile screen:
As you can see, we must have a zoom effect when resizing the page of a browser or when we pass on a smartphone screen. I have a lot of elements to insert in the footer so the image must be zoomed to integrate them all.
Here is the code I have done so far.
.footer {
height: 639px;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="footer"></div>
The result is almost what I want but the problem is that the height of the footer does not change, and therefore I do not have enough space to put all my elements in the footer in the mobile version.
Thank you :)
Try adding height: auto, padding-top, padding-bottom in a media query for phone. You may have to experiment with the padding values a few times to make it look good. Also change the background-position so the curve can be seen on mobile phones. It will look something like this.
#media (max-width: 991.98px){
.footer{
height: auto;
padding: 50px 0;
background-position: center top;
}
}
#media screen and (min-width: 480px) { //480px is breakpoint you can adjust according to your need
.footer {
height: auto;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center top; //adjust according to you need
background-repeat: no-repeat;
background-size: cover;
padding-top: 3rem; //adjust according to your need
padding-bottom:3rem; //adjust according to your need
padding-left:inherit;
padding-right:inherit;
}
}
<div class="footer"></div>
Related
I have been working on positioning a background image, but the image is only positioned correctly while the webpage window is adjusted to its minimum width. As I resize the browser window the image is clipped on all of its' side lengths. The photo has a height much greater than its width(1391 x 2471). I thought I might have to incorporate a vertical scroll? The website is being designed for mobile platforms but I will be viewing and designing it primarily on a computer monitor. How might I maintain the images' integrity from Min. Width of browser to Max. Width of browser?
* { margin: 0;
padding: 0;
}
html {
background: url("image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My CSS code for the positioning of the image was taught to me on CSS-Tricks though it has provided the best results so far. I have added a link to the image encase you would like to view. It is a photo I took myself so I hope the link provided is functional.
You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.
You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.
Here's an example using your CSS settings (except see caveat below):
* {
margin: 0;
padding: 0;
}
html {
--imgw: 1391;
--imgh: 2471;
width: 100vw;
min-height: calc(100vw * var(--imgh) / var(--imgw));
/* make sure the whole height of the image is always shown */
background-image: url(https://picsum.photos/id/1015/1391/2471);
background-size: cover;
}
HELLO
Caveat: you have background fixed in your CSS. Two problems with that: it renders the element unscrollable and in any case it is not properly supported in Safari and makes the background look 'fuzzy' on IOS. So this snippet has removed it.
body{
background: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If I have understood this properly, you want the image to be displayed properly on all the sizes you want?
Well in that case you can use #media query.
#media(max-width: your max width in px) {
/*And here change the height and width so that it doesn't look weird*/
}
I only want to add an image (size 1920x1080) in my html for my 1920x1080 screen. The thing is that if I see my web in full screen (F11) it works perfect, but if I see it normally (with the OS' window, browser's bookmarks, etc.) it cuts the image's height. The CSS code used is the following:
html,body{
margin:0;
padding:0;
height:100%;
overflow: hidden;
background-image: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to get the image perfectly without full screen? Or to know how much height it takes my window and browser? Because, if not, then other people with the same monitor screen size, but with different browsers and OS, could have different results.
background-size: auto auto;
This will preserve the original size (and will be clipped at the edge). "Cover" always resizes the image to cover the container.
Alternatively, you can check the user's screen size and resize the background accordingly.
html, body {
background-size: auto auto;
}
#media only screen and (max-height: 720px) {
html, body {
background size: 1280px 720px;
}
}
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
}
}
etc.
You can also give the container a "min-height" or a "min-width" in css so the picture won't be cut even if the screen size a bit smaller than what you specified.
Example:
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
min-width: 800px;
min-height: 480px;
}
}
I check different webs to see the effect I described. In all I found there is a cropping effect because of the window of the browser (in the height of the image). Instead of full 1080px height we usually see images cropped in height. So I guess that it is inevitable to crop it a little bit if we don't visit the web in full-screen.
One mini-solution is to decide where should crop it (background-position: center top; crops the bottom part). Other is to make the web with a margin at top (not advised for people visiting with other methods: mobile, full screen, etc.)
The style that maybe can do what you want is background-size: auto 100%;, so it take the height of the browser to the size of the background, maintaining the proportion width.
Try to use this styles, so the image height is always the height of your browser. The bad part is that the image if it doesn't have a big width, it can have white lines at the sides.
html {
height: 100%;
background: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}
I've been researching how to use media queries properly, below is the site I'm trying to make responsive. However, I'm finding trouble adjusting the image of my picture, I test the responsiveness on my PC, which is 17 inches and also on my Galaxy 5.
**edit, the problem is solved for me
.background-image {
position: fixed;
z-index: 1;
background:url(nycgold.jpg) fixed;
background-size: cover;
background-position: center;
padding-top: 13%;
padding-bottom: 100%;
font-family: 'Montserrat', sans-serif;
}
#media only screen and (max-width: 320px) {
/* styles for narrow screens */
.background-image{
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 1800px) {
/* styles for MacBook Pro-sized screens and larger */
.background-image{
width: 100%;
height: auto;
}
}
Any help is appreciated.
First, you've got 3 styles here:
The default style
The style for max-width:320px
The style for max-width:1800px
But all three styles set the background image to the same size. Backgrounds are not really something that you need to write responsive code for because they generally try to fit the browser's rendering area, but background-size:cover set once in the main style would ask the browser to fill the background with the entire image, so setting widths isn't necessary.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size for more information about the background-size CSS property.
To test out your media queries, make sure that there are DIFFERENT values set for elements in them and use something that is better suited to responsive, like an image in the foreground. <img src=""> or text size of an element.
If what you want is for the background to show once, with no repetition, add this background-repeat: no-repeat;
Other than that, your image should fit the whole width of whatever size the MQ is.
I have created this page and it is working fine, I'm having issue regarding the resizing, when I do resize the browser my page cropped and couldn't scroll to reach it. This is my HTML Code
<body id="page-top">
<style type="text/css">
#media (min-width:1500px) {
.new_bg {
background-image: url(img/bg2000.png);
background-size: cover;
background-repeat: no-repeat;
min-height: 50%;
}
}
in my CSS code:
html,body {
width: 100%;
height: 100%;}
Apologize if I didn't catch the needed portion of code, you may refer for the page to try, thanks.
UPDATE
]2
In you page CSS,
#media only screen and (orientation:portrait){
header{
display:none;
}
}
This is causing your page to go invisible when you resize your window. When you start resizing your window, at some width and height, the orientation is becoming as portrait and whole page is set to display:none.
Based on your question, I feel like, you don't need that style, as your query was like you are unable to find the content on resize.
Update
Your .header-content style is having -webkit-transform:TranslateY() and transform:translateY().
This is making your content to move up and making your page start position outside the browser view. Please remove these two.
Your header-content is having padding values, making your main content to move some pixels to the right. This is causing overflow. Please remove this as well.
#media (max-width:1500px) {
.new_bg {
background-image: url(img/bg2000.png);
background-size: cover;
background-repeat: no-repeat;
min-height: 50%;
}
}
change min width to max width try thiss...
I'm new to responsive design and CSS. It seems like a simple question but I can't get a straight answer from Google. I have tried http://css-tricks.com/centering-in-the-unknown/ The ghost block works perfectly but it leaves me a white background colour. Now I'm stuck. Basically, I have a logo size 534x385 and I want this logo to be centered on any devices. In the case of mobile phones I would like this logo to shrink to match the screen size as well.
<div>
<img class="logo" src="images/shapes-logo.png" />
</div>
.logo {
position: fixed;
top:15%;
left: 50%;
margin-left: -267px;
}
html {
background: url('../images/shapes-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's my CSS so far. But if I do this the margin-left: -267px will cause problems in mobile devices.
Resizing the Object
To change the CSS property when the screen resizes, you can use
element {
width: 100%;
height: 100%
}
You can specify your own values too to make them work. This way, everytime the screen shrinks the object or element gets smaller.
Other way, to get the mobile and tablets to get to work is the usage of CSS3 (Media Query)
Like this:
#media only screen and (max-width: 400px) {
/* here comes the trick..this is the css, which would be applied to all
* the devices whose screen has a max-width of 400px..
*/
}
You can then set some properties for it, lets say you can change the image width to
img#logo {
width: 50px;
}
So that, for smaller size screens the image width is just 50px.
Note that, this is also applied if the browser on desktop gets a width of 400px! This way, if the browser gets resized down to 400px width, the image will shrink to fit the place. In other words. Media Query is the best option to change the CSS properties depending on screen sizes. And again, you can use width: 100%.
To make the percentage thing work, you should use a container, such as div This way, the img will inherit the width of div and fill it. For example, if the div that wraps the image has 400px width, the image with width: 100% will have a width of 400% and so on.
Centering the Object
The best method to center the object is to use margins. But not custom ones, but the browse generated.
Lets say, you want to align some image in the center of the page horizontaly, you can achieve that using max-width: 100px and margin: 0 auto. Like this:
img#id {
max-width: 200px;
margin: 0 auto; no vertical margin, auto horizontal margin
}
This way, the object will be placed in the center and the browser will automatically generate the margins for it. The max-width is to make sure, that it takes just the space it needs to. I created a site a fews days ago, you can check the image at the end of the page here: http://www.aceinternationals.com
You will see the image was never provided any code that has to be kept in mind, it is just max-width and margin. So when ever you use the browser resize function, the image will always come to the center.
White background
White background might be because of the image's bckground color, or the background-color of the body! That might be inherited by the user agent (browser). I am not sure, why that happened! Sorry :)
Reference:
http://css-tricks.com/css-media-queries/
Good luck :)
My opinion is to add addition class with logo in html.
like:--
<p class="classname"><div class="logo"><img /></div></p>
.classname{ text-align:center; width:100%; }
This will always keep your logo in center.
if it won't solve. use these with above css.
margin-left:auto;
margin-right:auto;
And also add:
.logo{ max-width:100%;}
.logo {
width:33%;
background: url('your_logo.png');
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
your container:
html {
margin:auto;
}
You can try doing something like this. If you post a link I can better help you.
You should simply use max-width:100% for your image. It will keep the image responsive.