Significant Shift in Layout Occurs When Text is Bolded

Recently, I have started learning about HTML and CSS while working on a simple website project. I have noticed that whenever I make text bold within a paragraph, it leads to a significant layout shift issue in PageSpeed Insights.

The website I am working on is Best Teen Patti Games

Below are the screenshots from Pagespeed insights:

https://i.sstatic.net/CV57e.png

https://i.sstatic.net/qbXHz.png

https://i.sstatic.net/ZLrfn.gif

I attempted to generate a GIF of CLS using this tool:

Despite spending an hour trying to fix this issue, I haven't been able to come up with a solution yet. If anyone here has experience with fixing such issues, I would greatly appreciate your help!

Thank you!

htmlcss

Answer №1

Perhaps you could adjust the line height of the entire text to accommodate both bold and non-bold sections?

.p3 b {
  font-weight:normal;
}

.p3 b:hover {
  font-weight: bold;
}

.p2 b {
}
p {
vertical-align: baseline;
}

div p:first-child { margin-top: 0 }
<div style="column-count: 3;">
<p class="p1">Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold,</p>

<p class="p2">Text <b>with bold</b>, Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>,  Text<b>with bold</b>,  Text <b>with bold</b></p>


<p class="p3">Text <b>with bold</b>, Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>,  Text<b> with bold</b>,  Text <b>with bold</b></p>
</div>

<div style="column-count: 3; line-height: 26px; border-top: 1px gray solid; padding-top: 30px; margin-top: 30px;">
<p class="p1">Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold, Text without bold</p>

<p class="p2">Text <b>with bold</b>, Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>,  Text<b>with bold</b>,  Text <b>with bold</b></p>


<p class="p3">Text <b>with bold</b>, Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>,  Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>, Text <b>with bold</b>,  Text<b> with bold</b>,  Text <b>with bold</b></p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to send a variable to a URL when a link is clicked?

Recently, I started learning PHP and ran into a challenge while working on a school project. The specific issue that I'm facing is how to pass variables to a URL when a link is clicked. Essentially, my problem involves a dropdown menu displaying diffe ...

phpjqueryhtml

Tips for adding data-mage-init to HTML elements

I have inserted the HTML content into a specific div. styleBasedProducts += "<div class='row image-full'><div class='col-md-12 home-title text-center'><div><span class='light'>Style Based</span>& ...

phpjqueryhtmlmagento

Policy regarding copyright content removal and protection of privacy

In the majority of musical websites I have come across, they often mention the following in their policies: At this particular website (www.Indiamp3.com), you will find links that redirect to audio files. These files are hosted elsewhere on the internet a ...

asp.nethtmlweb-crawlerprivacy

What's the scoop with for loops and grabbing elements?

In my code, I have a for loop that looks like this: for(i=0; i<6; i++) { if(i = 0) {a1 = '<div>something1</div>';} if(i >= 1 & i <= 5) {b1 = '<div>something2</div>';} } document.getElementById(&apos ...

javascriptjqueryhtml

Using a CSS pseudo-element within a PHP script does not produce the desired results

One challenge I'm facing is that I had to include the <?php ?> tag in my PHP code in order to add styles using pseudo element span:before with content: 'text' which contains translations for multiple languages. The <meta charset="u ...

phphtmlcsspseudo-elementcss-content

Utilizing flexbox to enable unordered lists to wrap based on content

Here is the current code I have: HTML return ( <Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}> {children} <div className={classes.box}> <ul> {props.pizzas?.topp ...

cssreactjsflexboxmaterial-ui

Instructions on showcasing a PHP database query result in an HTML table on the same page using a single script

Just a quick query - I need to know how to select and display a row from my database using PHP in an HTML table below my current code. I've tried calling the DisplayTable() function when clicking an HTML button within the same script, but it's no ...

phphtml

Switching the image on click of an option tag

I'm looking to create a dynamic image changing feature using two select tags in my HTML. One select tag is for the model and the other is for the color. When a user selects a model from the first dropdown, I want the image to change to reflect that mo ...

phpjqueryhtmlcssimage

Merge HTML code with JavaScript from Fiddle

There was a similar inquiry posed in this specific forum thread, however, I am encountering difficulties converting the code from JSfiddle to HTML. You can access the JSfiddle example through this link: here. I attempted to apply the suggested technique ...

javascriptjqueryhtmlangularjs

Preserve present condition following a jQuery click event

I'm facing a challenge where I need to hide a button upon clicking another button, but the problem is that when the page refreshes, the hidden button becomes visible again. My objective is to keep it hidden even after refreshing the page and only reve ...

javascriptjqueryhtml

How can I make tooltipster display tooltips properly?

I have been struggling to customize tooltips using a library called tooltipster. Here is what I currently have: Head of index.html: <head> <!--TOOLTIP CSS--> <link rel="stylesheet" type="type/css" href="node_modules/tooltipster-master ...

javascriptjquerycsstooltiptooltipster

Connect to a particular section of the webpage with additional top spacing

The navigation on this page is not transparent. Whenever I link to a specific part of the page, some text becomes hidden behind the navigation bar. This is illustrated in the image below: https://i.sstatic.net/h0ExX.png What I desire is a navigation bar l ...

htmlcss

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

css

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

Creating a Three-Row Table with Material-UI and React

I am looking to achieve a layout similar to the one shown in the image below: I want to construct a table with three rows, where the third row is positioned below the first and second rows, and the width of the third row is equal to the combined width of t ...

htmlcssreactjsmaterial-ui

Error in the PHP/HTML code

Similar Question: PHP: Dealing with "Undefined variable" and "Undefined index" Notices I'm new to asking questions on this platform. Currently, I'm working on building a basic forum based on this tutorial, but making modifications as needed. ...

phphtml

Adjust the backdrop for the currently chosen tab

For some reason, my code isn't working even though I thought I did everything correctly. My goal is to change the background color for the selected tab. This is what I have tried so far: <script> $('#navigation li').click(function() { ...

htmlbootstrap-4tabs

I am having trouble inserting a table from a JSON object into an HTML file

getJSON('http://localhost:63322/logs', function(err, data) { if (err !== null) { alert('Something went wrong: ' + err); } else { //var myObj = JSON.parse(data); // document.getElementById("demo").innerHTML = myObj.ad_soy ...

javascripthtmljson

Is it possible to incorporate Javascript into Skeleton framework?

I've run into a bit of confusion while trying to navigate the world of frameworks. Specifically, I'm experimenting with Skeleton (getskeleton.com) for the first time and encountering an issue with a Javascript file. Despite referencing it in the ...

javascriptcssframeworksskeleton-css-boilerplate

"Enhancing iPhone User Experience with CSS Hover Effects

I am experiencing an issue with my website where the hover functionality works perfectly on all devices except for iPhones. On an iPhone, users have to continuously press the screen until the hover transition completes in order to view the information. I ...

iosiphonecsshoveruser-agent