I am little new in HTML and CSS. I am building one simple site.
I have marked that when I make some text from paragraph bold, its causing large layout shift issue in PageSpeed Insights.
My page is Best Teen Patti Games
I am attaching screenshot of pagespeed insights.
I have tried to generate GIF of CLS using
https://defaced.dev/tools/layout-shift-gif-generator/
I am trying to fix it from last one hour but not getting idea what to do for fix the issue. Let me know if someone here can help me for fix it.
Thanks!
Maybe you can give the whole text an increased line hight - high
enough to accommodate both the bold and the non-bold text?
.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>
Related
Is it possible to align two p tags in this way in html and css? How? Thanks!
I tried with many css codes but I didn't find the solution! The problem is that the second line of "Text text etc" go under the date, but I want exactly this:
2014-2020 Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text
My last code:
<span><strong>2014-2020</strong></span>
<span style="text-indent: 40px">Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</span>
There are a number of ways to do this. You could look at floats, flexbox, or grid. Below, I've used CSS grid:
.container {
display: grid;
grid-gap: 1rem;
grid-template: 'date content';
}
<div class="container">
<p>12-24-2021</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Use display flex
.container{
display:flex;
}
.first{
width:20%
}
.second{
width:80%
}
<div class="container">
<span class="first"><strong>2014-2020</strong></span>
<span class="second">Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</span>
</div>
Tables:
<table>
<tr>
<td width="75">2014-2020</td>
<td>Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</td>
</tr>
</table>
There are at least seven different options for achieving that layout. float+flow-root, flexbox, grid, inline-block + calc, table-cell and position:absolute are six of them.
But I'll show you how to do it the way you were trying, with text-indent.
body {
margin-left: 100px;
text-indent: -100px;
tab-size:4;
}
span:nth-child(2)::before {
content:'\09';
white-space:pre;
}
<span><strong>2014-2020</strong></span>
<span>Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</span>
In HTML I have:
<section>
<h2>Title here</h2>
<article>
<div class = "image">
<img alt = "image title" src = "image location" height = "300" width = "231">
</div>
<h3> text that needs to be wrapped here</h3>
<p> here too</p>
</article>
</section>
How would I code this in CSS to wrap around the image?
Your image needs to float so the text and can wrap around, we are all telling you this.
If the text has to wrap around a non-rectangular shape, shape-outside can be used too .
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
Example with a rounded image
div.image img {
float: left;
border-radius: 50%;
shape-outside: ellipse(160px 100px);
border:solid;
}
h3,p {margin:0;}
<section>
<h2>Title here</h2>
<article>
<div class="image">
<img alt=" title" src="http://dummyimage.com/300x200/e3de88&text=shape-outside">
</div>
<h3> text that needs to be wrapped here</h3>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
<p> here too</p>
</article>
</section>
Here is some other example where the text can be layed inside fancy & complexe shapes: https://css-challenges.com/custom-text-shape/ & the pen that goes along https://codepen.io/t_afif/pen/eYpeOXB
.image{
float:left;
width:30%;
margin-right:10px;
}
.image img {
display:block;
width:100%;
height:100px
}
<section>
<h2>Title here</h2>
<article>
<div>
<div class="image">
<img s src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" >
</div>
<div>
<h3> text that needs to be wrapped here</h3>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</article>
</section>
Part-way down my page I have a table with two columns and multiple rows, each containing varying amounts of dynamically generated text.
I would like to float a div (of fixed size) so that it spans as many rows of the second column as may be necessary from the top-right corner, with lines of text wrapping around it as required.
So if, for example, the bottom of the div is half-way down the third row, the text in that row should wrap around the left and bottom edges of the div.
I hope this makes sense. Can anyone please help?
I don't believe that would be a correct usage of table element. To solve your problem it will be better to use div or p elements. If you float right the red element, those that follow will wrap around it. If you want to use table you may consider using third column or position absolute div next to the table.
p {
margin: 0;
padding: 10px;
}
#wrapper {
width: 500px;
}
.row {
position: relative;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
.row:last-child {
border-bottom: 2px solid #000;
}
#table p:first-child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20%;
padding: 2%;
border-right: 2px solid #000;
}
#table p:nth-child(2) {
margin: 0 0 0 24%;
width: 71%;
}
#rightColumn {
border: 2px solid #000;
position: relative;
z-index: 1;
float: right;
background: #ff0000;
width: 20%;
margin: 0 0 2px 2px;
}
<div id="wrapper">
<div id="rightColumn">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
<div id="table">
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
<div class="row">
<p>text text text</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text</p>
</div>
</div>
</div>
In my website, I have a page like this:
<div style="float:left; width: 75%; padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<p>
</div>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;>
As you can see,I've tried floating my image right and my text left as all the other suggested questions prompted, but that doesn't seem to make it wrap around.
Also, I want to make it appear like this on mobile:
HEADING
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
etc...
IMAGE
What else can I do to achieve this?
NOTE: I am aware how much you guys hate inline css lmao. It's just that I'm in such a situation that I must do so. It's hard to explain. :/
EDIT:
I used the code provided in the answers:
<div style="width: 75%;padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;" />
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
This works fine on the PC view, but viewing it on mobile is a whole different story... the text doesn't wrap around the image at all... how can I fix that?
Put your image at the top most point where you want text to wrap it.
It also mus be in its container
another note you where missing " /> from your img
you also didn't end your <p> tags correctly </p>
<div style="width: 75%;padding:15px 0px 0px 0px;">
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" style="float:right; width:25%; min-width:200px;" />
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
update on request
Here is how you get your image to sit at the bottom of your text even although its at the top when in mobile
div {
width: 75%;
padding: 15px 0px 0px 0px;
display: table;
}
img {
width: 25%;
min-width: 200px;
display: table-footer-group;
}
p,
h1,
h3 {
display: table-caption;
}
<div>
<h1>HEADING</h1>
<h3>TEXT TEXT TEXT</h3>
<img src="http://dummyimage.com/300x300/000/fff" />
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
Put your image at first and also you mess close bracket / in your image tag.
<img src="http://dummyimage.com/300x300/000/fff" style="float:right;
width:25%; min-width:200px;" />
I try to set different a background colors for left and right columns and to maintain the same height.
So I set a background color for outer wrapper ("container" div) so it will set a color to rightBar.
But this didn't work.
Online Demo
I want it to work on all browsers.
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="contentcontainer">
<div class="container">
<div class="mainBar">
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div class="rightBar">
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
<p>BAR Text BAR Text BAR Text</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body
{
font-family: Verdana,Tahoma,Arial, "Trebuchet MS" ,Sans-Serif,Georgia,Courier, "Times New Roman" ,Serif;
margin: 0px;
padding: 0px;
background: repeat-x scroll center bottom #C4DAE9;
text-align:center;
}
.contentcontainer
{
}
.container
{
margin-left: auto;
margin-right: auto;
margin-top:5px;
width: 99%;
text-align: left;
background-color:Gray;
clear:both;
}
.mainBar
{
width:70%;
float:left;
background-color:White;
}
.rightBar
{
width:30%;
float:left;
}
By floating your two inner Bars, you take them out of the normal document flow. The result is that the containing box container effectively has no content and no height.
By adding a overflow:hidden to .container you can solve that problem, but then you will run into problems if the right bar is higher than the left bar.
I also think that in order for it to work in IE6, you might need to add a zoom:1 to .container but you'll have to try that.
You have to clear the floats at end of the container. One of the ways is:
...
<div class="rightBar">
...
</div>
<br style="clear: both;">
</div>
.rightBar
{
width:30%;
float:left;
height: 100%;
background-color: red;
}
also set the height of the parent element "container" to what ever...