Hi I was on this site http://senecapartners.co.uk/services/ and scrolled down to “equity” section and they have done nice design with the diagonal container. I can get most of the design apart from this part below:
.card-and-image .card-image .card-image-cover {
width: 200%;
height: 100%;
}
I can’t work out the 200%. Is it correct to have 200% and why is it needed.? Why wouldn’t 100% work?
Hi there 05beckga,
I am unable to find “width: 200%;” anywhere in the CSS. 
coothead
Hi there SamA74,
yes, I see it when I “Inspect Element” . 
But I am unable to locate it in the actual CSS files. 
coothead
Well there is no shortage of css files to explore. 
The Inspect shows in in one called style.css of which there are two to choose from. I found it in the second one, on line one, along with everything else…
That’s what I got too. Not too sure I want to pick apart a minified file to show where though.
That’s why Inspect is so much easier with this kind of site.
You can quickly edit 200% to 100% and see the effect.
It sounds to me like you need to practice using the browser tools AND making test pages until you figure out how something works.
I will contribute the following to your effort, but figuring out why 200% is being used is still going to be up to you. I can tell you that the answer will not be obvious. You will have to do some reading and thinking… AND making more test pages.
I copied the HTML for the site that you like and deleted everything that proved to be unnecessary to the rendering of that box. There are three such boxes, actually. I commented two of them out. You should easily find the HTML element with that series of classes in this test page. Since there is only one CSS file being used and no Javascript, all you need to do is pare down the CSS. You can do that with browser tools or copy the CSS file to your PC and delete the unnecessary rules.
Copy the working page demo file to a new file and double-click it to open it in your browser. The parts in question and behaviour are all there.
<!DOCTYPE html>
<html lang="en-GB" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel='stylesheet' id='smtheme_styles-css' href='http://senecapartners.co.uk/wp-content/themes/seneca-main/assets/css/style.css?ver=4.8' type='text/css' media='all' />
</head>
<body class="page-template page-template-page-templates page-template-page-landing page-template-page-templatespage-landing-php page page-id-60 page-parent desktop gecko">
<div class="container-all">
<div id="main-content" class="container-page">
<div id="page-content">
<section class="section-cta-landing">
<div class="container container-full">
<div class="card-wrapper card-child clearfix">
<div class="card card-and-image">
<div class="card-image bg-cover" style="background-image: url(http://senecapartners.co.uk/wp-content/uploads/2017/05/shutterstock_56673664-e1496072339647.jpg)">
<div class="card-image-cover">
<div class="skew-h grey-bg"></div>
</div>
</div>
</div>
</div>
<!--
<div class="card-wrapper card-child clearfix">
<div class="card card-and-image">
<div class="card-image bg-cover" style="background-image: url(http://senecapartners.co.uk/wp-content/uploads/2017/05/shutterstock_197058218.jpg)">
<div class="card-image-cover">
<div class="skew-h grey-bg"></div>
</div>
</div>
</div>
</div>
<div class="card-wrapper card-child clearfix">
<div class="card card-and-image">
<div class="card-image bg-cover" style="background-image: url(http://senecapartners.co.uk/wp-content/uploads/2017/05/shutterstock_183326243.jpg)">
<div class="card-image-cover">
<div class="skew-h grey-bg"></div>
</div>
</div>
</div>
</div>
-->
</div>
</section>
</div>
</div>
</div>
</body>
</html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
