I'm writing a website with HTML and CSS. My problem is that when I for example run my website in my browser, I adjust all the margins with percent. But then when I run my browser in fullscreen or if I adjust the size of the window the websites different parts fall apart and doesn't fit together as they should. Why doesn't the percent unit fix that problem since it's relative to the size of the window?
CSS:
#aboutMeDiv
{
background-image: url('noisyBlue.png');
position: absolute;
width: 100%;
height: 118px;
margin-top: 13.6em;
margin-left: -0.7%;
opacity: 0.5;
transition: opacity 0.3s;
}
How can I make it "the same way" even if the window changes?
Thanks!
A more precise answer cannot be given without seeing your code, but this issue can probably be solved by adding a min-width and max-width to your container element.
For example, if the structure seems to fall apart when the width is less than 700px and when it is greater than 1500px, you could use this:
.container {
max-width: 1500px;
min-width: 700px;
}
Of course, this might inhibit responsive design -- especially for mobile browsers. It may be a good idea to check out some already-made CSS frameworks like Twitter Bootstrap and Gumby Framework.
Edit following addition of code to the question:
How can I make it "the same way" even if the window changes? Thanks!
If you want #aboutMeDiv to be "the same way" even if the window size changes, you should use concrete numbers instead of percentages of the div size; i.e. change width: 100%; to a something like width: 700px;. Then, as noted above, you can use a min-width to make sure the screen shows all the content within the div.
Related
My website hosts a lot of images of all sizes. These images are responsive and change size at all browser widths from desktop to mobile. I see in my Google Search Console that I have a poor CLS (cumulative layout shift) of .25s. The layout of my website shifts as the images load.
Since my images are responsive, I can't specify exact sizes of the images, or have placeholders to reserve the space.
What is a modern way to prevent CLS with responsive images?
Layout here: https://jsfiddle.net/exspwgab/
Update: I tried one suggestion on the internet which is to specify the image file's width and height within the img tag like:
<img src="photo.jpg" width="1504" height="752">
And then in CSS you do:
width: 100%;
height: auto;
This didn't seem to work in any browser. And the elements on my webpage still moved all over as the images loaded.
If anyone has a solution that works in all browsers please let me know. I essentially need placeholders to hold the space while the images load to prevent the page jank issue.
JSFiddle of my responsive layout here:
https://jsfiddle.net/exspwgab/
I am not sure if this is exactly "a modern solution" to the CLS issue but just trying to be helpful as much as I can.
Obviously, it's not logically possible to put constant-sized placeholders for the responsive image elements. What if we use placeholders/elements with fixed-sizes for the responsive contents?
For example:
img.placeholder-image {
width: 100%;
height: 256px;
object-fit: contain;
}
With the fixed-height, this element won't add up anything negative to the CLS policy while keeping the whole image content inside the element itself even if the viewport gets resized.
I'd very much suggest you consider using <div>s instead of <image> elements to display image contents (using background property), however, I can't vouch that's not another violation of audit rules.
My two cents.
HTML:
<img width="300" height="450" src="300x450.jpg">
CSS:
img {
height: auto;
aspect-ratio: 2/3;
max-width: 100%;
}
Target browsers:
Chrome 88+
Edge 88+
Articles:
MDN
Caniuse
I had absolutely same problem.
Solution is change width: 100% to max-width: 100%
this is implicitly stated on https://web.dev/optimize-cls/
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
If you need to do what you're doing... don't worry about it.
Tools that identify potential problems with your site don't know the context. For example, suppose my site had a huge 20 MB image that took several seconds to load. Google's tools would undoubtedly flag this as a problem. But, maybe in my example, my site is hosting scientific imagery or something that requires a lossless large image size. My users would happily spend a few seconds loading the data they need.
If the layout of your site requires that you load images that are then resized dynamically, then that's what it requires and you shouldn't worry about it.
I ended up using the solution found here:
http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/#:~:text=And%20here%20is%20the%20formula,flashes%20on%20lazy%20loaded%20images.
HTML
<a class="thumb lazy-container" href="#">
<img class="lazy" data-original="image.jpg" alt="">
</a>
CSS
.lazy-container {
display: block;
position: relative;
height: 0;
}
.post .lazy-container {
padding-bottom: 55.3%;
}
.lazy-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Since all of my images have a different height, I put the padding-bottom percentage as an inline style for each image.
I'm trying to insert basic html (local file) into a parent html. From my previous question I concluded that jquery load might never work in prod so I attempted to use iframe as per Makesh Keshu's suggestion. It sort of does what I want, but now I'm running into some styling issues? Since the local file I'm trying to embed is just text essentially, I want it to just look like the parent html holds the text (aka responsive sizing and all) -- motivation for embedding the html and not just writing it in directly is mainly because the site owner wants to try to make the text entry not "steal-able" from just doing inspect and copying the text away.
My css right now uses an iframe wrapper class that does the usual that everyone else suggests:
.text-wrapper {
position: relative;
padding-bottom: 100%;
padding-top: 100%;
height: 0;
overflow: hidden;
}
.text-wrapper iframe {
position: absolute;
border: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
However, I suspect due to the aspect ratio from the padding attributes, it looks great when my screen is in split-screen view or on mobile, but when I resize the screen to full screen, there is a lot of white space under all the text to keep the container at roughly the half-screen-view aspect ratio. (Please correct me if this assumption is wrong -- I'm still a beginner with front-end.)
Basically, I want to try to make the aspect ratio of the iframe container the same as the ratio of the tab/window/screen -- which changes as window resizes and whatnot.
I looked through this question because it seems similar, but I'm neither sure I understand the idea behind the answer very well nor am I sure it really answers my question. That question I think is asking to size the iframe-container according to the content size without using a fixed aspect ratio, which would achieve the same thing, but I'm trying to see if I can just make the aspect ratio responsive based on the "screen"(window?) ratio.
This article ended up working really well for my specific purposes. I'm not sure I 100% understand the theory behind it yet, but it uses a pseudo-element. It seems to have solved my problem of having extraneous whitespace in the iframe container in full-screen, but I'm not sure if it solves the general issue (for people who want to try the method out).
The css code I ended up using (for the container, css for iframe remains the same):
.aspect-ratio-box {
background: white;
}
.text-wrapper::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 52.46%;
}
.text-wrapper::after {
content: "";
display: table;
clear: both;
}
I'm having an issue with max-width/max-height inside of media queries. Basically what's happening is I have an image gallery that uses jQuery to display a modal window. This modal window consists of the modal, a content box, and an image viewer which has some buttons inside for navigation thru images). I have the max-width/max-height set in vw and vh in css but the exit button gets cut off on a mobile device.
Current CSS:
#photoViewer {
display: inline-block;
position: relative;
margin: 0 auto;
width: 0;
height: 0;
transition: width 0.5s, height 0.5s;
}
#photoViewer img {
position: absolute;
top: 50%;
left: 50%;
max-height: 70vh;
max-width: 70vw;
}
I tried using a media query:
#media screen and (max-width: 955px) {
#photoViewer img {
max-width: 50vw;
max-height: 50vh;
}
}
but it's not changing anything. I found if set hard "width" and "height" rules it works but the max- seems to throw it off. Any ideas?
Here's a fiddle that demonstrates kind of what I'm working with (my whole code is pretty large):
https://jsfiddle.net/jessereitz1/6nxg21a3/3/
At least in the fiddle you posted it works:
The images' original sizes there are only 200x133px or vice versa. With max-width/ max-height values they will never get larger than their original size.
Only if the screen/viewport becomes less than 400px wide, the max-width: 50% will have an effect (for landscape mode images, that is - portrait even less: narrower than 266px).
Thanks everyone for your help and insight. I just found the biggest bug anyone can find in their code: human error and stupidity. I found I had placed an identical CSS rule at the bottom of my code setting the img max-height/width to 90vh/vw. I can now say I've learned to scroll through ALL my code before hopping on here! Thanks again!
Just an FYI...
Another human error to watch out for that wastes a lot of time due to sometimes working and sometimes not is when media queries are listed in the wrong order.
Sometimes they can get out of order unexpectedly, especially when changing from min to max or vice versa.
When using max-width, check to make sure all queries appear largest to smallest width (1200px, then 992px, etc).
When using min-width, check to make sure all queries appear smallest width to largest (576px, then 768px etc).
Another possibility is that you have a min-height set on that element, which would override your max-height setting.
I built a site where nearly every element got it's size in vw-units. So text, padding, margin, height and width of every element is set in "vw". This works great.
My problem is that there should be a change and now the site should not scale over 1200px-width any more. That means if the screen is wider than 1200px the site should not fill 100% of the width and every element should be as big as it would be on 1200px screen width.
For sure I have a div with a max-width of 1200px but everything inside is still growing with the screen.
I know that I can use 1200px as a breakpoint and that I can define every element again beyond that. But that is what I want to avoid.
My question means: Is there any way to modify the css-unit "vw" in the way that it uses 1200px as base-width for every wider screen than that?
If you're uing a container element, you can set it's max-width, which will not allow the width of the element to exceed the amount you specified.
html, body {
height: 100%;
}
body {
background-color: #faa;
width: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#container {
background-color: #afa;
width: 60vw;
max-width: 200px;
margin: 0 auto;
padding: 10px;
}
#container p {
margin: 0;
}
<div id="container">
<p>This div's width can't go any further than 200 pixels.</p>
</div>
I found your question after having solved the same exact problem, and then wondering if there was a different solution. It seems like it’s a common issue right?
Unfortunately, my solution probably won’t work for any one since I have a very dynamic site where almost all my CSS dimensions get put through a function at runtime. Therefore it is able to modify it for exactly this situation. It works for what I’m doing but I can hardly recommended as a good practice.
The only other solution I could think of is to multiply everything by a sort of fake VW unit.
.dog-image
{
// 50vw
width: calc(50 * min(1vw, 12px));
}
So when the screen is wider than 1200px then it is limited to 50 * 12px.
I haven’t actually tested this so I don’t know if there are any rounding errors. An alternative approach should fix that.
width: min(50vw, calc(50 * 12px));
If you’re using a css preprocessor you could probably make a function to do this for you.
I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.
Here's what it's supposed to look like:
Here's what it looks like at some resolutions (or zoomed in):
If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.
I would imagine this is a common problem with an easy solution. Thanks for your help!
If you change your #righthand to have a float:left, the vertical line at the right disappears.
#righthand {
width: 368px;
height: 373px;
background: url("../img/right.png");
float: right; // CHANGE TO LEFT
}
And if you change your #tp to height:248px, the other horizontal line disappears.
#tp {
width: 1024px;
height: 249px; //CHANGE TO 248px
}
I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting
background: transparent url(imgsrc) no-repeat left top;
that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have
margin: 0;
padding: 0;
so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.