So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Related
I am fairly new to coding and need some help. I have a bootstrap website where the slider does not re-size to mobile devices or tablet sizes.
The code in the CSS I have added are:
img{ max-width: 100%;}
iframe{ border: 0; width: 100%;}
and
what am i doing wrong?
.img{
width: ....;
height: ....;
}
#media all and (min-width:900px){
.img{
width:....;
height:....;
}
}
so this is css code. the first .img by itself is what it will look like on a phone for example, the # media tags is what you use to change the size of stuff when the screen size gets above the min-width size. I suggest using firefox as it has a nice responsive view so you can change the screen size to see what it will look like on a smaller screen
So, I want to create a header image for my site. I want it to be responsive and I'm taking the 'mobile first' approach. I have a picture, and as title suggest, I want it to be displayed differently based on device's display size BUT it still has to be the same image file. For example, on mobile I will see only small part of the image, but as soon as I hit certain width, it will change to full size. This site http://adopciaki.pl has exactly what I want - I tried to replicate their layout but to no avail. Thanks for help!
there're several possibility's to achieve this, for example, on mobile:
img{
position: relative
width:auto;
height: 100%;
left:50%;
transform: translateX(-50%);
}
this will position the image centered, give the wrapper element a overflow hidden
then on tablet or desktop you can set the width to 100% and the height auto and so on...
One solution would be to use an SVG copy of the image and use CSS media queries to size it based on the screen size - https://jsfiddle.net/rkr9psbf/1/
#media (min-width: 1200px) {
img {
width: 300px; height: 300px;
}
}
#media (max-width: 600px) {
img {
width: 150px; height: 150px;
}
}
You'll see the image shrink to half the size by making your browser window smaller. Hope this helps!
Below i have written some css to ensure my "sections" use up the whole screen when navigated to, however when the browser window is made smaller or accessed on mobile the content is lost as it does not fit.
I have made a media query to counter the first bit of css but I'm not sure what to set it as to counter it.
#media screen and (max-width: 550px){
section.full {height: auto;}
section.contactfull {height: auto; margin-top:0%;}
}
section.full {height: 100vh;}
section.contactfull {
height: 70vh;
margin-top: 10%;
}
I think you will have to leave things flow down. No matter what device people use, you can restrict only one of the 2 dimensions, but not both of them.
Just adjust things horizontally and let them flow vertically.
If you want the section to take up the whole screen, you can use the following:
section {
display: fixed;
width:100%;
height:100%;
}
I think the reason vh is failing you is because at a smaller resolution, the horizontal scroll bar shows up on your page, and vh doesn't take it into account.
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 have some question about html and css.
Here are the case. I'm building a mobile web, which my base line is 240px width. So all my elements's dimension is set base on the 240 screen size. But when I view the web in a larger phone like Samsung Galaxy note. All things seem to be too small for user to click on it.
Now the question, is it possible to use variable kind of css for width and height ??
Lets say, the thumbnail I use in 240px width device is 50px, so when I view my thumbnail in a 480px width device, the thumbnail will be display in 100px, which means the thumbnail will be increase its size based on the percentage of the screen increased.
Yes, obviously you can, what you are looking for is called Responsive Design, to accomplish that, you will need #media queries.
Demo (Resize the window to see the effect)
div {
height: 200px;
width: 200px;
background-color: tomato;
}
#media all and (max-width: 400px) {
div {
height: 100px;
width: 100px;
}
}
Use percentages for your width instead of fixed width to make the images responsive.
For example, use 100% instead of 50px. It will automatically fill the container (in which the container is also responsive) and automatically resize on your browser.
yes ,it is possible,responsive design achieve in following ways,
All dimension in %
media queries
yes, you can use #media queries for responsive design
example:
div{
width: 50px;
}
#media all and (min-width: 480px){
div{
width: 100px;
}
}
(or) u can also use percentages at certain cases like width: 20%