My site is responsive. When I change my window size, the content size scales to fit the window. On mobile it's fine, and on desktop it also scales up and down-according to window size.
My content won't, however, span the whole width of the screen on desktop. Height is fine but width it doesn't stretch right across. It sort of sits between the menu bar and logo.
I tried
html, body{height: 100%; width: 100%;}
.container{
width:100%; height: 100%; max-width: 100%; max-height:
100%;position: relative;}
#media screen and (min-width: 48em)
.blog:not(.has-sidebar) #primary article
{
width: 100%;
}
body:not(.has-sidebar):not(.page-one-column) .page-
header
{
display: none;
}
.content {position: relative;}
#body {height: 100%; width: 100%;}
With
.container
It did move it, but not across the whole width, just to the left, slightly outside of logo parameter.
Any ideas?
div#primary {
margin: 0 auto;
float: unset; height: 100%; width: 100%;
}
.container{width:100%; height: 100%; max-width: 100%; max-width:
100%;position: relative;}
the position: relative; take it out :) hope that works.
also 2 max-width's, you can take 1 out as well
you can add in your css
#media (min-width: 875px) {
div#primary {
margin: 0 auto;
float: unset;
}
#masthead .flex-row
{
max-width: 66%;
margin: 0 auto;
}
}
Related
For the desktop landing page, I want this composition of images to maintain it's height in relation to the browser height (75vh), otherwise this landing collage will become too horizontal/skinny as someone shrinks the width of their browser.
As it changes proportion with the page getting wider or narrower, I want the images inside to be cropped, not stretched.
I figured out a way to crop them, but only if I set an actual px height to the images. I don't want that. I want the height to be in proportion to the browser height. If I make the divs they're in a ratio of the height of the browser, then the images just stretch inside to fit the div.
<div class="landing">
<div class="landing-side"><img src="landing-1.jpg" alt=""></div>
<div class="landing-side"><img src="landing-2.jpg" alt=""></div>
<div class="landing-center"><img src="landing-3.jpg" alt=""></div>
<div class="landing-side"><img src="landing-4.jpg" alt=""></div>
<div class="landing-side"><img src="landing-5.jpg" alt=""></div>
</div>
.landing {
position: relative;
width: 100%;
height: auto;
display: flex;
}
.landing img {
width: 100%;
height: auto;
display: block;
}
.landing-center,
.landing-side {
height: 75vh;
display: flex;
flex: 1 1 auto;
overflow: hidden;
justify-content: center;
}
.landing-center {width: 40%;}
.landing-side {width: 15%;}
Here is how I did it before - at a certain browser width, the height would be fixed in px, then the side images would start getting cropped*. This is OK, but then I'd have to do make it hop to various specific image heights at different widths. Whereas I want the height of the whole larger container of images to change as the browser changes proportions.
.landing {
position: relative;
width: 100%;
display: flex;
}
.landing img {
width: 100%;
height: auto;
display: block;
}
.landing-center,
.landing-side {
display: flex;
flex: 1 1 auto;
overflow: hidden;
justify-content: center;
}
#media screen and (max-width: 1536px) {
.landing-center {flex-shrink: 0;}
.landing-center img,
.landing-side img {
width: auto;
height: 400px;
}
}
*(Note: I'd prefer that only the side images get cropped in the first code example as well, but that may complicate things too much for this one question.)
To croping an image, you need to use overflow: hidden;
just like:
.croped-content {
position: relative;
width: 25vw;
height: 70vw;
border: 2px solid red;
overflow: hidden;
}
.croped-content img {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="croped-content">
<img src="https://cdn.pixabay.com/photo/2017/10/06/07/29/guava-2822182_1280.png" alt="guava">
</div>
All I had to do is put the vh here, instead of the px. This works now. I got all mixed up trying too many ways to make this work that I missed the fact that I had put the height attribute to the container instead of the image.
.landing-center {flex-shrink: 0;}
.landing-center img,
.landing-side img {
width: auto;
**height: 75vh;**
}
i'm trying to build a responsiv webpage and it works on small screen up to 640px and on bigger screens. there are two elements next to each other.
The problem is between the breakpoint 640 px and up to bigger screens. Until you've stretched out to bigger screen the two elements floats in to each other. Like between maybe 640 px and up to 800 px..
Here's the css where the two elemets is placed next to each other.
#media screen and (min-width: 640px) {
article {
max-width: 75%;
position: absolute;
margin-right: 2em;
}
aside {
float: right;
display: inline;
max-width: 20%;
}
How can i get them to not float in to each other?
Your position: absolute is creating the problem. Not sure why you need it.
Are you looking for something this below
HTML:
<div class="left"></div>
<div class="right"></div>
CSS:
.left, .right {
float: left;
border: 1px solid red;
height: 200px;
box-sizing: border-box;
}
.left {
width: 70%;
}
.right {
width: 30%;
}
I created a grid with different sized images with the following code in CSS:
.wrapper{
width: 100%;
margin: 0px auto;
display: inline-block;
text-align:center;
padding: 25px 40px;
max-height: 190px;
margin: 0px auto;
min-height: 200px;
}
.table-center{
padding-top: 15px;
}
/* Image Classes*/
.image-box{
max-width: 250px;
max-height: 150px;
/*float: left;*/
display: inline-block;
padding: 0px 40px 30px 40px;
}
My images when I resize the window to roughly 1200px
I put all my images of varying sizes into image box and everything works pretty well until I resize the browser. Can anyone offer a better solution? One will be responsive in every size?
You need to use #media queries. Learn about them here.
Basically, you set different sizes for different screen resolution breakpoints:
#media (max-width: 600px) {
.image-box{
max-width: 150px;
max-height: 50px;
}
}
#media (max-width: 1000px) {
.image-box{
max-width: 250px;
max-height: 150px;
}
}
etc...
A full jsfiddle or codepen example would be more helpful but I can say:
Try using flexbox instead:
.image-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info
I'm trying to get an image to fit inside a container while keeping it's size ratio. The image should take full height or width depending on orientation. My solution does work on all browsers I've tested but IE11(works in 10 and 9 surprisingly).
In IE 11 the image is cropped on the right. I'd like a pure css way if possible and I don't care about centering it.
Here is the JSFiddle : https://jsfiddle.net/wagad0u8/
<div class="owl-item" style="width: 465px;">
<a class="img-flux" href="page1.html">
<img alt="omg" src="http://placehold.it/1000x100">
</a>
</div>
<div class="owl-item" style="width: 465px;">
<a class="img-flux" href="page1.html">
<img alt="omg" src="http://placehold.it/400x780">
</a>
</div>
.img-flux img {
border: 0;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
position: relative;
transition: all 0.3s;
margin: 0 auto;
float: none;
display: block;
vertical-align:middle;
}
#content-block *:last-child {
margin-bottom: 0px;
}
.owl-item, .owl-item .img-flux {
height: 100%;
}
.img-flux {
background-color: #ECECEC;
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.owl-item{
float:left;
height:300px;
margin-bottom:50px;
}
This seems to be a bug in IE11: Bug Report. Adding flex: 1 (as in the report)
.img-flux img {
flex: 1;
max-width: 100%;
max-height: 100%;
}
works for me. Flexbox for the parent seems ok, so even centering is easy.
Another option is
flex: 0 0 auto; /* IE */
object-fit: scale-down; /* FF */
on the img, instead of flex: 1 , increasing compatibility with Firefox. See comments and bug report for more info.
.img-flux img {
border: 0;
max-height: 100%;
max-width: 100%;
height: auto;
width: 100%;
position: relative;
transition: all 0.3s;
margin: 0 auto;
float: none;
display: block;
vertical-align: middle;
}
Use
vw - for width instead of %
and
vh - for height instead of %
that is supported in older versions like IE11.
https://jsfiddle.net/wagad0u8/1/
To ONLY apply the changed code to IE10+ use:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
.img-flux img {
max-width : 100vw;
max-height : 100vh;
}
I'm seasoned webdesigner, so I don't know much about this art.
I got three elements placed horizontally (left/center/right) which have fixed size:
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
and inside every div there are few images, that are centered horizontally and general style for img is:
img {
max-width: 100%;
}
to make them fluid.
But since divs are not flexible, images inside them also won't change their size when resizing browser window.
Is it possible to set fixed size on any html element and still somehow make it fluid?
I know I could use percentages instead pixels, but I've got also problems with setting proper height for .banner-box using percents - box doesn't stretches to desired 400px, only to 281px.
Here's html:
<div id="footer">
<img src="footer-line.png" alt="Footer.png" />
<p><span>some span</span> blah</p>
<p>mail: <span>mail#domain.com</span></p>
</div>
And whole css for my simple webpage:
html {
background: url('mu-media-background-1920.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
img {
max-width: 100%;
}
#container {
width: 1200px;
margin: 5% auto;
text-align: center;
}
#header {
display: block;
clear: both;
position: relative;
width: 100%;
margin: 0 auto;
}
#content {
display: block;
width: 95%;
height: auto;
margin: 10% auto 5% auto;
}
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
.banner-text {
position: relative;
display: block;
top: 7%;
margin: 0 auto;
}
.see-more-button {
position: absolute;
display: block;
margin: 0 auto;
left: 0; right: 0; bottom: 0;
}
#virtual-studio {
float: left;
}
#mu-animation {
float: right;
}
#shadows {
display: block;
clear: both;
position: relative;
width: 100%;
}
#shadows img {
display: block;
clear: both;
position: relative;
margin: 0 auto;
}
#footer {
display: block;
clear: both;
width: 95%;
margin: 0 auto;
font: 15px Arial, Helvetica, sans-serif;
}
#footer p {
display: table;
clear: both;
position: relative;
margin: 0 auto;
color: #AFBEA5;
text-align: center;
width: auto;
}
#footer span {
font-weight: bold;
color: #BDC9AF;
}
I'm preparing responsive layout, so it would be best (afaik) to use only percentages.
Here is a good hybrid approach that has worked well for me in the past.
As you've already mentioned you could use percentage widths to build a fluid layout, and then restrict/fix specific div sizes with max and min values. So for example:
#container {
width: 100%;
max-width: 1200px;
}
Here is a working example with the banner boxes restricted to max 300px width and min 400px height (I added some padding and borders so you can see what is going on): jsfiddle
In the end you'd still have to adjust your responsive media queries to deal with your fixed elements, but this way you'd only have to change a few min and max values.
You will need to use media queries and define fixed widths/heights for .banner-box for each screen break point that you choose.
You'll have to play with the sizing and see which sizes fit best for which break points.