Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 1 year ago.
Improve this question
as we all know Google is rolling out new Core Web Vitals Update next month, I am worried about my website WishesPlus which is having a CLS of 0.33 in Red, which is bad for rankings on Search Engine. Please help me solve this issue as soon as possible.
Cumulative layout shift (CLS) is how much content on the page moves about during the load.
layout shift score = impact fraction * distance fraction
You will see this type of error in PageSpeed Insights
Solution to reduce CLS:
Simply include width and height attributes in image tags.
<img src="banner.png" width="256" height="256" alt="verz banner" />
You can also specify your hight & width dimension on CSS.
img{ width: 100% height: auto; }
Note: Allow the browser to select what size each image is If you use srcset attribute to define images.
You can also use CSS property object-fit: contain for a feasible solution with no layout shift.
That's true Cumulative layout shift (CLS) is how much content on the page try to adjust itself till the load complete (Includes HTML, CSS and Javascript).
Tips:
You can block the javascript files which manage your content layout
from the browser and see what's the difference between having that and
blocking that. Whatever difference you find can lead you an increase
in CLS.
Use transform property instead of changing the height, width, top,
right, bottom, or left properties to adjust the content or move
elements around the port.
If your CLS is below 0.1 it's good and if it's above 0.25 is very bad.
Related
I'm currently customizing wordpress layout for one company and I have a problem with layout.
I have a logo in header and to the right of it is navigation. But when I'm zooming in, at one point the navigation skips to the next row.
I'd like to ask you how should I keep them on one row when zooming.
Page can be found on dev.machala.cz
Thanks in advance for answers.
When you zoom your page that means viewport size is getting lower and your page starts using your Media Query for that width.
If you don't want to break your menu to down. You have to remove your Media Query.
This is not an issue. You can leave it as it is.
If you are trying to do this for layout purposes on mobile and tablet maybe consider this -
Try changing the font size of the menu text to:
font-size: 1vw;
and then change the media query for the of the mobile menu toggle bar to 1000px
and set the font size back to normal in that media query.
Using VW make the font scale with the width of the browser.
Doing this means you'll be able to shrink the browser for slightly longer and then the media query for the toggle will appear sooner avoiding the text moving to a new row.
I'm currently developing a responsive website and have a certain image within a set amount of 'columns' (div size) for the site. This image is bigger than the size of div itself so flows over the edges (using html and not CSS Background-Image). When I use the CSS background-image method the image gets cut off to fit the div and overflow:visible doesn't fix it (from what I've read you can't have a background-image overflow it's own div).
So I want this image to overflow it's div but also have the image be cropped to the edge of the browser window, otherwise I have a big empty white bar down the side of the website when you resize the browser window for smaller screen devices, like so:
http://i.imgur.com/74NEmDF.jpg
Are there any known methods of solving this or does Javascript need to be used to fix it (I know little JavaScript so I couldn't figure it out myself). Thanks in advance.
edit: Still no luck, been searching everywhere. Would love any help, thanks guys.
edit 2: Figured it out! Was a very simple fix of adding overflow:hidden to my hero unit (big containing div). I feel so stupid it took me so long to figure out such a simple fix.
Just wondered if anyone using the Flexslider has found that when switching back and forth from different size browser windows the slide images do not automatically adjust to new height and widths.
Let me clarify - they do shrink correctly but when scaling back up the first image in the slideshow gets stuck at the previous aspect ratio until the next slide comes in, at which point the whole thing adjusts.
To stop my content from being affected I have created a fixed height container for the flexslider and have used media queries to change its height as it is scaled down. This works perfectly scaling down.
It seems to be on the way back up that it has trouble sorting the image heights out.
I would provide links but it is a new client project in confidence.
All coding is exactly as is from the demo files, with exception to the fixed height and media queries on the container div.
I had the SAME problem - I found that not all my widths were of the same value.
e.g.
.clone { display: block; float: left; width: 994px!important; }
<img src="http://www.website.com/images/panel1.jpg" alt="" width="980px">
There were about 4 instances in my css that had different widths [shame shame] so I went in there and raked the css file.
I hope this helps
Good Luck
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.
As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?
Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/
edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.
edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.
I would think you can just leave the overflow property to visible and just use padding left and right.
Unless you have images, the text should just get wrapped.
For images, you should look at using children divs with width:100%
Can you try some jQuery scroll plugins for this?
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
http://baijs.nl/tinyscrollbar/
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Try the jquery selectbox plugin, it's great and do exactly what you are trying to:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.