I'm freelancing for a company and came across an issue I can't figure out.
I don't really want to post the URL to the page but I'll try explain as best I can.
The company is using foundation framework inside Magento.
They have 2 column side by side layout Text / image - then image text etc.
The div code is this
<div class="columns small-12 medium-6 type-h tile tile--one medium-push-6" data-equalizer-watch="" style="height: 385px;">
<img class="tile__image tile__image b-lazy b-loaded" src="image-url">
</div>
The main issue is this
data-equalizer-watch="" style="height: 385px;"
On mobile view this height changes randomly from 385 to over 570px depending on screen size. What this is doing is leave a large white space below the image as the image is only 385px in height.
I can't control the div from expending to this size.
I've tried using the important tag to force a max-height but can't.
I don't have access to the source code. Just the page in question inside Magento.
If you dont want it to affect mobile just add this.....
data-equalize-on="medium" to the surrounding div with data-equalizer on it
Related
I was checking Core Vitals on PageSpeed insight and noticed its flagging Image elements do not have explicit width and height and suggesting Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
I am not sure what it exactly means and what i can do properly to resolve this issue, specific to my case
<img src="someimage.jpg" width="100%" height="100%" alt="something" class="img-responsive">
My page is responsive and i am using bootstrap v3.x for this webpage as its is old page. since page is responsive and i am using class="img-responsive" which automatically resizes image with, but this impacts core vital such as CLS.
Since layout is responsive what is the best approach to define use image to avoid CLS issue.
I have noticed most of the CLS reported by Page Speed Insigh is for owl Carousal
Below is the copy of code which generate CLS issue for images
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 lc-hp-col">
<div class="owl-carousel owl-theme" data-items="1" data-items-desktop="1" data-items-tablet="[991,1]" data-items-mobile="[767,1]" data-pagination-speed="200" data-auto-play="true" data-stop-on-hover="true">
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+1">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+2">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+3">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+4">
</div>
<div class="item">
<img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+5">
</div>
</div>
</div>
</div>
</div>
CodePen link
Some article have suggested to use scrset for responsive images but this is not practical as we have to then upload multiple versions of same image.
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>
NOTE: The sizes of your images are fix as of Bootstrap mechanic!
If you have a nearer look to your page your images are responsive but not fluent. That means the size does change in predfined steps when the vieport changes the width. Inbetween this steps the sizes for the images are allways the same even if the sizes are set in percentage. That's the mechanic of Bootstrap.
So, - your are able to set fixed values to the sizes of your images without changing the layout!!!
You will find the original steps Bootstrap uses (if not changed for the project) here:
https://getbootstrap.com/docs/3.4/css/#grid-media-queries
As you see Bootstrap standard is: if viewport width becomes more than 769px the size changes, same as on 992px and on 1200px.
Taken from the codepen example the sizes of your images are:
// Up from Vieport width:
768px = Image: 720x426px
992px = Image: 940x557px
1200px = Image: 992x588px
(Note: below viewport widht 768pxcodepen does not work. Have a look for the size(s) on original page.)
Knowing that you are able to advice fixed sizes to the images by media queries. You may do this using sass with the original tools of Bootstrap (see link above). Or do something like this:
/* below 768px take values from original page */
#media (min-width: 768px {
.owl-carousel img {
width: 720px !important;
height: 426px !important;
}
#media (min-width: 992px {
.owl-carousel img {
width: 940px !important;
height: 552px !important;
}
#media (min-width: 1200px {
.owl-carousel img {
width: 992px !important;
height: 588px !important;
}
NOTE: I am not quite sure if that css overwrites the Bootstrap markup. So maybe you have to give it an higher specificity i.e. by using div.owl-carousel div imgor something similar. And if height is not correct please readout all sizes from original page. Sometimes you will need to be more exact i.e. with height: 588.xxxx px.
Answer
The width and height we are talking about, are intended to be a fixed number to avoid the warning.
That's needed to reserve the (explicit) required space for the image while it's loading. If you give it a percentage, the browser cannot know the size it will need, so it will be changing, and cause the page layout to shift (that's what we try to avoid).
Edit
I'm not sure about what you mean with "it becomes even harder". No one said it's easy, as you have a complex problem.
You are trying to:
Serve a responsive carousel.
A carousel with responsive images.
Avoid warnings from Web Vitals about Layout Shifts.
Complex solutions for complex problems, that's what it is.
There is no real solution to this issue other than the srcset solution that you mentioned. The layout shift issue will likely be flagged unless you specify image dimensions.
I agree that the integration of multiple image sizes is difficult & cumbersome & perhaps not always justified. Even if you integrate the multiple sizes of images you can still have a layout shift if the images are set to scale responsively to ANY size rather than just a set of options.
The CLS is less likely to be flagged by Google (or to bother any users) if your images begin to load very quickly so that the image sizes are known before the layout has a chance to fully render (& thus shift). Defer anything you can to bring the images towards the front of the line.
This may be questionable but I implemented a tiny generated png to get the image data loaded very quickly like this:
<img class="img_scale"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="/img/img.jpg"
/>
You may also be able to use csscalc to estimate the percentage, pixel value or em value of a container for the image in order to greatly reduce the amount of shift. You probably can't eliminate it without using static sizes but you can cut it way down.
You can work around this problem by
Setting explicit <img width height> - for height value use your best guess what the most image heights will be
Later override the HTML element height attribute with the following CSS:
.my-img {
height: auto;
}
However note that this causes cumulative layout shift, CLS, event after the image is loaded, so you are essentially shifting the problem around. The CLS issue can be worked around by making sure the container element hosting the image has min-height set.
Here is the full source code for an example Svelte component where I worked around this problem.
When you use img src tag so you need to add width and height whatever actual image width and height attribute with img tag for an Example like this:
So it is not Create CLI in google page insights.
So currently I'm using Bootstrap's grid system and a simple card. In the card, I render dynamically the background image. Think of the Instagram grid system. Everything works fine, except that once I go below a defined column width, the card resizes it to maybe 10% of its original height and the image is barely visible.
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="card" style=" min-height: 100%; min-width:
100%;background-image: url('<%= rails_blob_path(post.images.first)
%>'); background-position: center; background-size: cover;">
</div>
</div>
</div>
col-md-4: Everything nice as excepted:
Below col-sm-4 (or md, doesn't really matter, once it drops below the last defined col class it starts to look like this):
As you can see, once I scale the width of the browser down, it just snaps the height of the card to the second image.
Is it possible to resize the card in the second picture to fill the height, without messing around with the heights of the other cols? Adding "min-height: 200px;" will fix this issue, but it will also mess with the other col widths and make them appear stretchy.
Sorry if that's a basic question. I found a few posts but I couldn't fix it at all and normally backend, just trying to understand Bootstrap better.
Using "background-size: contain" will make it so that your images don't stretch and are fully visible, but you are still stuck with setting a min-height, which won't mess with your col widths so you don't have to worry about that. Consider using an img tag instead of divs with backgrounds though as they will size based on the image, whereas the image sizes itself with the div when you use divs w/ backgrounds
Cheers,
Ethan
So i came up with a solution, thanks everyone for your input. Just in case someone else runs into this problem:
Heres the working solution:
<div class="card h-100">
<%= image_tag(post.images.first, class:
'img-responsive', style: "width: 100%; height:
100%;")%>
</div>
I tried this before, but the cards were unequally in the height and the images were not really full width/height. The key is here to set the card to h-100 so that the card height is equally. Then, stretch the image in width&height too 100% and use img-responsive. This way, the image scales nicely together with all col widths.
Greetings!
I have a client asking for a very odd request (to me).
Ok, so I have 3 images. All different sizes. They want them in a wrapped container, equal heights. Images positioned at the bottom, text at bottom.
Now, doing this is easy... until you get to the responsive part.
This site:
http://www.neilcramerphotography.com/
Full screen, they look ok (still working with it). But once you resize the screen (which I foresaw happening) the layout gets all wonky.
I only need to worry about the first 6 images, rest is set design.
No matter what I do or use, there is some sort of fixed number. Like I have to set a fixed height for each of the first two rows. Tried padding. Getting frustrated because I can usually solve most problems. Just stuck.And if it is NOT doable. I need others stating so. People never believe me,so :)
I may have to try percentages instead.
I wish people understood not everything you do on paper can not always be easily converted to something like this without problems. A layout from some other designer that does not know CSS.
Thanks in advance.
add box-sizing: border-box to your .woo_category_subs
Is this what you're asking?
Are they open to a 3rd party library? I'd personally recommend Twitter Bootstrap. It's a very powerful, scaleable framework. In addition to carousels, navbars, glyphicons, accordians, and bunch of other doodads, it supports responsive image resizing through a breakpoint based grid system. I use it on my personal website and blog which you can test the responsiveness of with Google Chrome's inspector (accessible inside any Browser with CTRL + SHIFT + I). An example of a responsive image from my website is below:
<div class="col-lg-2 col-sm-3 col-xs-4">
<a class="linkPic" href="mailto:james.jm.taylor#gmail.comSubject=Nice%20website!"
title="My Email" target="_top" rel="external">
<img class="img-responsive" src="images/mail.jpg" alt="Email me">
</a>
</div>
The magic happens in the class declaration for the first div tag. Specifically "col-lg-2 col-sm-3 col-xs-4". What this translates to is an application of a bootstrap css size rule scaling the picture to 1/6 screen size on desktops, 1/4 on tablets, and 1/3 on smartphones (the bootstrap grid is 12 columns wide, and lg, sm, and xs corespond to desktop, tablet, and smartphone respectively).
Hope this helps.
I have a header with some info about my page at the website http://danceforovariancancer.com.au
The header html is
<div class="container-fluid myheader text-center">
<div class="headeroc">
Ovarian Cancer
</div>
<div class="headerdance">
Dance-o-thon
</div>
<div>
Registerget sponsors
</div>
<div class="headerdate">
<span class="glyphicon glyphicon-calendar"></span>May 14th <span class="mybold">2016</span>
</div>
<div class="kingston">
<span class="mybold">3</span><time>pm</time> - <span class="mybold">11</span><time>pm</time>
at the <a target="_blank" href="https://www.google.com.au/maps/place/Kingston+City+Hall/#-37.9305426,145.0266516,14.25z/data=!4m2!3m1!1s0x6ad66eb237f62e3f:0xc9e49003d9d323c1!6m1!1e1" class="mybold">Kingston City Hall</a>
</div>
<div class="kingstonmap" id="kingstonmap">
</div>
</div>
and uses just some text styling classes for the size and boldness and then some padding too. I realised that when I rescale the width of the site, the text just moves to the next line and it looks pretty ugly. Here is a demo of a nicely resizing header with text
Do they use media queries or something else because it re-sizes at nearly every width step so it doesn't seem like media queries, is there an implemented way to do this in bootstrap with classes? Will these re-size all the text so to speak relative to each others font size, so it all looks the same. Cheers :)
Thank-you
use vw instead of em
here is a link to another stack overflow page with a similar question.
Font scaling based on width of container
I think 8 or 9 vw will get it to around the size you want it to be at.
Cheers
JavaScript is the way to do it smoothly (or I guess a media query for every pixel, but that's absurd). I'm not going to write a plugin on here, but basically you would do a window resize event and check if the height of the element changes. If it does, that means it's line broke, so you would change the font size. You'd also want to take line-height into account as you change font size.
For a much quicker solution, I've always liked the FitText plugin:
http://fittextjs.com/
I want to create website based on the 1140 grid system with a "landing" image that fills the whole browser, so you'll have to scroll for the content.
So, basically, when you open it, you see this image (with height and width that fill 100% percent of the browser, without any constraints) and when you scroll you see the rest of the page, which is in centered and in columns.
Please not that I want the "landing" image to be scalable as well - it will fit an smartphone or tablet widts as well.
It sounds like you are looking for something like this. It is a very basic layout, but you should be able to get the idea from that fiddle.
Basically, you just create a <div> with 100% height and width. It will take up whatever size the browser is, then you can add another block element below that to house your other content.
<div style="height:100%;width:100%;">
<img src="http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg"
style="height:100%;width:100%;"/>
</div>
<div>
here is some other stuff</br>
here is some other stuff</br>
</div>