I use column-width to produce a multi-column text block on wider screens. However, this multi-column text block causes a large CLS (cumulative layout shift) of about 0.1s for Desktop view on the PageSpeed Insight tool. Example webpage is https://www.lybrary.com/aldo-colombini-m-45.html
If I remove the multi-column style CLS is zero. I have tried to apply that style directly to the element with a 'style' parameter, but this did not change anything. It doesn't matter if the style is applied through a style sheet, a style block in the HTML, or a style parameter in the element. When it is multi-column there is a large CLS reported. I don't understand why this is the case. Are multi-columns processed at the very end and thus they cause layout shifts? Any ideas of how to avoid this and still have responsive multi-column text that is a single column on smaller screens and a double column on wider screens?
Here is an example stripped down to a minimum. I am still seeing a 0.059 CLS on PageSpeed Insights:
<!doctype html>
<html>
<head>
<style>
.mcol2 {
column-width: 36em;
}
</style>
</head>
<body>
<article class=mcol2><p>(19th March 1951 - 12th February 2014)<p>
Aldo Colombini moved to the United States from Italy in 1993. He has performed in over 45 countries. He is a F.I.S.M. prizewinner. He performed often on Italian television (RAI 1) and has also appeared on television shows in Portugal, Spain, Japan, Colombia and Sweden.
<p>
Aldo has performed often at Caesar’s Magical Empire in Caesar’s Palace, Las Vegas and continues to appear several times a year at the famous Magic Castle in Hollywood, California where he is one of few magicians who are able to perform in all four showrooms. Aldo was voted by the Academy of Magical Arts, Hollywood, California: twice Parlor magician of the year. In the history of the Magic Castle is the only magician to be nominated in all five categories: Comedy, Stage, Close-up, Parlor and Lecturer. He appeared on “Masters of Illusion,” a series of weekly magic specials airing on PAX-TV. He speaks Italian, English, Spanish and French and can perform in all four languages allowing him to dazzle audiences from diverse backgrounds.
<p>
Aldo has written and published several books on magic and created many magical effects used by magicians all over the world. He also lectures on magic worldwide and was nominated by the Academy of Magical Arts twice Lecturer of the Year.<p>set alert for this author</p></article>
</body></html>
Related
I want to change the color of two different types of descriptions. I want the text for two different descriptions to appear as two different colors. I want the text for the site description to appear as purple, and the text for the musician summary underneath each artist's name to appear as hot pink.
<!DOCTYPE html>
<html>
<body>
<head>
<title>My Music Website</title>
<style>
.musician-summary{
color: blue;
}
#site-description{
color: red;
}
</style>
</head>
</body>
<h1>My Music Website</h1>
<p id="site description"> Check out some of my favorite musical artists
from around the world.</p>
<hr>
<h2 class="musician title">Stephane Wrembel</h2>
<p class="musician summary">His biggest influence and
inspiration is Django Reinhardt. His music
is in the style of gypsy jazz. He learned
how to play directly from gypsies while living
with them for a few years.
Mysticism is a big theme in much of his
music. He plays many French standards
and his own compositions.</p>
<h2 class="musician title">Bjork</h2>
<p class="musician summary">Bjork has always shown a musical ability.
At the age of 11 she recorded her first album.
She gained fame outside of her country in the Icelandic punk band
The Sugarcubes, and later on went solo.
Her solo music is very ecclectic.
It ranges from hip-hop with some rhythms, classical, electronic, and she
has been dubbed as the queen
of trip hop due to her use of hip hop beats.</p>
<h2 class="musician title">Sima Bina</h2>
<p class="musician summary">In Iran she is called Maestra Sima Bina. Her
music is played in styles that are from and around Iran.</p>
Your CSS selector and class/ID in HTML are different; you have a space on ID and class, and using - in HTML.
Settle your class and ID with the same name as in CSS; musician-summary and site-description.
By the way if you use space in class or Id names, it creates 2 classes/IDs
this is my webpage http://www.noor-azmi.com/element/company.html
As you can see, there are 2 grey boxes on top. I do not want the gap in between them. I want it to be combined into 1 rectangle box.
They are both in different columns the left one is col-8 and the right one os col-4. When i checked in the browser, it seems there is a 15px padding each between them.
I am ok with the padding but can the padding also have the same BG colour ? Then that will solve the issue. Thanks
Seperate grey part into another row and you are good to go.
<div class="row">
<div class="our_company col-sm-8">
<h2>Our Company</h2><br>
<p>As the name indicates, Element Design Studio is a boutique design studio that provides landscape master planning and full serviced landscape architecture services for hotels, resorts, residential developments, mixed-use projects and golf course landscapes. Headquartered in Singapore, Element was co-founded by Gregory Kunak in 2011 based on simple and straightforward fundamentals; to provide Clients with the highest quality design services.<br><br>
Since 2011, Element has provided design services for a vast amount of projects located in 16 countries, consisting of Bangladesh, Egypt, Guinea, India, Indonesia, Laos, Kenya, Korea, Malaysia, Mauritius, Nepal, Saudi Arabia, Seychelles, Singapore, Sri Lanka and Vietnam. <br><br>
Whether appointed to provide landscape master planning services on a 100 hectare mixed-use development or engaged to provide detailed landscape design services for a hotel, resort or luxury residential condominium, Element takes immense pride with providing the highest quality of design excellence throughout every stage of the project. Above all, it is our fundamental goal to ensure that our Clients achieve a successful landscape product.</p><br>
</div><div class="our_leader col-sm-4">
<h2>Our Leadership</h2><br>
Gregory Kunak<br>
<h3>Managing Director</h3>
<img src="image/Gregory-Kunak-Profile.jpg">
<p>After working for 20 years with two of the largest and most prominent landscape architecture firms in the United States and Singapore, Gregory Kunak co-founded Element in 2011.<br><br> Through his career, Gregory has gained extensive design experience on many notable hotels, resorts, residential developments and mixed-use projects throughout the United States, Caribbean, Middle East and majority of Asia. As Managing Director of Element, Gregory is responsible for every aspect of the company.<br><br> As a registered landscape architect, Gregory is responsible for ensuring that each and every project adheres to the most stringent health, safety and welfare standards while striving to achieve design excellence. He is a rollercoaster enthusiast, enjoys the outdoors and horticulture and supports the Pittsburgh Steelers. </p></div>
</div>.
Try this,
You need to make change in you div
HTML Code:
<div class="row">
<div class="col-md-12 bg-grey">
<div class="col-md-8">
This is col 1
</div>
<div class="col-md-4">
This is col 2
</div>
</div>
</div>
CSS Code:
.bg-grey {
background-color: grey;
}
I don't expect the answers here to add much to the 21st century's understanding of computer science, but I am grateful for the help of the community.
I have an image I'm trying to center in bootstrap. It's in a .container-fluid, a .row, and a .col-xs-6 with .offset-xs-3. The <img...> itself is .img-responsive. You can see the project on this codepen: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000.
The image is not centering - I should be able to get an image that scales with the viewport width (a la SVG) and is in the middle of the page. I can't seem to manage that.
I'm wondering if it has something to do with the fact that I'm taking a "raw" image from dropbox as my src, that the image is a .jpg, or some combination? Then again, I'm a noob at this, so it's equally possible that there's just a typo somewhere I can't seem to find. I have been over the bootstrap docs, and various SO questions to no avail. The only solution I have found is removing the <img...> from the container and row, and assigning ... class="centered-block" .... Unless I'm fundamentally misapprehending something, however, (1) I shouldn't have to do that, and (2) rather than bashing through I'd like to understand what my conceptual error is in any case, for my own learning.
PS - totally unrelated, but my <a ...></a> tags don't seem to be clickable. If anyone has any ideas there, that would be great too.
It turns out the basic issue is that CodePen relies on Bootstrap 4, not (as I had assumed) Bootstrap 3.
You're using classes from Bootstrap 3 but loading the stylesheet from Bootstrap 4; they aren't compatible across the board. img-responsive no longer exists as well as the col-xs-* classes. See Images and Grid Options.
Note: Your links won't work because they aren't valid HTML and you're also closing your h2 with an h3, validate your markup.
Working Example:
#media (max-width: 480px) {
h1 {
font-size: 5vmax;
}
h2 {
font-size: 3.5vmax;
}
h3 {
font-size: 2.5vmax;
}
li {
font-size: 2.5vmax;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<h1 class="text-primary">Dr. Clair Cameron Patterson</h1>
<h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2>
<div class="container-fluid">
<div class="row">
<div class="col">
<img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin">
</div>
</div>
</div>
<h3>Academics</h3>
<ul>
<li>Undergraduate, Grinnell College</li>
<li>PhD, University of Chicago</li>
<li>Researcher, California Institute of Technology</li>
</ul>
<h3>Brief Timeline</h3>
<ul>
<li><strong>1956</strong>: found the earth to be 4.55 Billion years old using lead-lead dating and
a fragment of a metorite that fell in Arizona. This calculation has been largely undisturbed since.</li>
<li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li>
<li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution
systems.
</li>
<li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it
is likely he was a major antecedant of this change.</li>
</ul>
</div>
I've the below html code with divs as column creators and separators, here when i run this in my web browser, it is creating an overlapping of data or the columns are not getting properly aligned. here actually i want a 3 column layout where in there would be an image in the first and second column top part. you can find the document how it should look like here and the fiddle Here. and also i don't want to use table here, just divs should do it. please let me know where am i going wrong.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.columns
{
width: 508.326px;
height:709.268px;
}
div.left {
width:341px;
height:709.268px;
border-right:dotted;
float: left;
}
div.right {
width:167px;
height:709.268px;
float: right;
margin-left: 10px;
}
div.white
{
width:188px;
float:left;
height:436.86px;
}
div.grey
{
width:188px;
float:right;
height:436.86px;
}
div.red
{
width:217px;
}
</style>
</head>
<body>
<div class="columns">
<div class="left">
<div class="image">
<img src="../Magazines/Images/Images.jpg" height="380" width="380"/>
</div>
<div class="white" >The English historian Lord Acton
famously said the “issue which has
swept down the centuries and which
will have to be fought sooner or later is
the people versus the banks”.
This cannot ring truer than now, with
many banks, particularly the biggest
ones, in the public spotlight facing
a wide range of investigations and
litigations, following the 2007-2008
global financial crisis. And as Mr.
Longo puts it, that is all just part of
doing business at the moment if you
are a financial institution such as
Deutsche Bank.
“Since the GFC (global financial
crisis), the industry has gone through
tremendous change on a variety of
fronts,” he tells Hong Kong Lawyer
one grayish morning last month in
Thomson Reuters’ office in Central.
“So we have to deal with investigations
and litigations on the one hand, and
on the other hand adapt our model
to see how we can reorganise and
restructure the institution to comply
with the variety of regulatory changes
as well as develop existing and new
business opportunities to replace
income streams that are no longer
viable.” </div>
<div class="grey">And to make it even more challenging,
a grayish macro-economic backdrop
where the economy remains weak in
Europe while recovering slowly in the
US.
“There are also challenges driven by the
plethora of reforms coming out of the
G20 commitments and demographics
and urbanisation, a whole range of
things… It is an interesting time to be in
banking,” he says with a laugh. The 53
year old should know, given that he was
once a key member of the Australian
Securities and Investments Commission,
responsible for enforcement.
The way that Mr. Longo sees it, how
the universal banking model changes
following the crisis will dictate the
future of banking. For instance, a key
discussion has been whether retail
banking activity should be separated
from trading and investment banking
activity.
“It’s a Glass-Steagall-type discussion,”
he continues, referring to the US
Banking Act of 1933, which separated
commercial and investment banking
components. It was passed during the
Great Depression in the 1930s. Sections
of it were repealed in 1999 partly to</div>
</div>
<div class="right">
<div class="red" >allow for the merger of retail banks
and investment banks that engage in
underwriting and dealing in securities
as banking operations.
“Some people argue that if we want to
protect the public purse, we need to get
so called ‘ risky’ investment banking
activity away from deposit-taking
activity that is seen as a public good.
That doesn’t seem to be happening in
the US, while that is happening in the
UK, with continued questioning in the
rest of Europe, generally, about whether
to do that.”
Before and after the GFC
The main difference before and after the
crisis, says Mr. Longo, is growth.
“Everybody was growing, hiring, legal
departments were growing,” he recalls.
“Since the crisis, there have been
enormous changes in how we think
about (things like) headcount,
resources, cost efficiency , adapting to
a new environment… Managing in that
environment is different from managing
in an environment where there is lots of
growth, hiring, and all of that.”
For instance, while he used to spend
more time on banking transactions in
the early days after joining Deutsche
Bank in 2002, Mr. Longo now often
finds himself dealing with managing a
range of regulatory issues and strategy .
Lawyers thinking of going in-house in a
bank now can also expect to deal with
a huge increase in regulatory work “to
develop responses to, and implement,
the immense amount of new global
bank and financial institution reforms”,
he says. These include “responding to
Dodd-Frank (Act) and Volcker (Rules)
from the US, the European Market
Infrastructure Regulation (EMIR), Living
Wills and Resolution plans, and the OTC
(over-the-counter) derivative reforms
and central clearing initiatives”.</div>
</div>
</div>
</body>
</html>
Thanks
Check out this fiddle and let me know if this is what you want.
I have made the following changes:
In your CSS the width of the left section was smaller than the sum of what was set for the white and grey divs and this was making the grey div to wrap-around (which is fall below). This was making your text overlap. Remember that the sum of the widths of the inner divs must be less than that of the container div for them to be displayed properly.
For your case we can split them just by using display: inline-block; rule itself and hence I have avoided the float rule settings. If you want to stick with floats, you can check this version.
I have rounded off the height setting to the nearest whole number just for example. You can modify this as required.
div.columns {
width: 670px;
height:710px;
}
div.left {
width:440px;
height:710px;
border-right:dotted;
display: inline-block;
}
div.right {
width:210px;
height:710px;
display: inline-block;
margin-left: 10px;
}
div.white {
width:215px;
height:100%;
border-right:dotted;
display: inline-block;
vertical-align: top;
}
div.grey {
width:215px;
height:100%;
display: inline-block;
}
.image {
height: 390px;
width: 100%;
}
Note: this question is no longer relevant. The site has been moved to a new host and the the code on the site no longer applies.
Thanks.
I am trying to help out a client. The site is almost ready to go, but there are a series of images that simply disappear in IE7.
The click on the Leadership tab and the whole block of content vanishes.
Here is the html for that section:
<div id="leadership-content" class="content">
<p class="intro">Leadership for every company is important in the daily management and growth as a business matures. At Moving Simplified we feel that offering our employees career-oriented paths gives them a more sincere desire to provide outstanding customer service. All employees have the option to "climb the ladder" to eventually own a franchise of their own.</p>
<div class="profile">
<h3>Eric M. Snider<img class="flt-right" src="_images/Eric_Snider_Logo_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" /></h3>
<h4>Founder / Chief Executive Officer</h4>
<p>Eric founded Moving Simplified in 2007 as a professional services company with a new concept to assist people during one of the most stressful times of their lives: moving. His vision was to build a new type of moving services company - a company that would include every service that a customer would need during their move. Bringing it all together in one company offering is the key differentiating factor with Moving Simplified. "We are changing the face and perception of the moving company stereotype one move at a time," says Snider. "We do this everyday by holding ourselves to a higher standard of service, people skills and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Ben_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Ben Simmons</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Ben joined Moving Simplified in 2009 as one of the first management team members. Ben's entrepreneurial spirit and physical fitness background makes him an excellent team player and role model. "We're working hard everyday to help change the perception and face of the moving business," says Simmons. "It can only be accomplished through discipline, desire and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Tim_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Timothy Browne</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Tim joined Moving Simplified in 2009 as a team leader and manager. Tim has a professional service background that was a natural catapult into Moving Simplified. "As a crew leader and senior manager, I have a responsibility to ensure that our customers are 100% satisfied with our moving team's presentation, ability and performance," says Browne. "Our goal is to be the area's top moving services provider and we strive to deliver that top-tier level of service with every customer."
</p>
</div>
Here is the css:
.profile { width: 630px; padding-bottom: 20px; }
#mainContent .profile h3 { margin-top: 10px; }
#mainContent .profile p { float: left; width: 350px; }
.profile img { float: right; }
.gray-line { clear: both; }
It shows up fine in Safari and Firefox but in IE7 it is nowhere to be seen.
Thanks for any help!
Are the images that don't show all in the same folder? Try renaming the folders to a name without an underscore _ at the start.
By the way, the images don't show in my Firefox nor IE8.