Warm tip: This article is reproduced from serverfault.com, please click
css html overlay shopify

Is there a way to bind all these elements together for changing screen sizes/zooming?

发布于 2020-12-02 15:06:41

So I was tossed into a web dev position, and made a website. gulp I'm trying to figure out how to change the CSS for this so that all overlay elements stay in their exact places even during zooming in/out, and on all screens. https://diamondbackbranding.com/pages/whypromo is what it's supposed to look like at all times.

I've tried doing vh/vw, but the elements stay the same size and move out of position in between media breaks. Is the solution just to do like 10 different media breaks, customizing each one? Web Dev is only a part of my job, and not the focus, so sorry if this is a stupid question.

.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vh;
}

.cggh {
  position: absolute;
  top: 100px;
  left: 0px;
  font-size: 45px;
  text-align: center;
  width: 60%;
  line-height: 35px;
}

.cggi {
  position: absolute;
  top: 140px;
  left: 0px;
  font-size: 30px;
  text-align: center;
  width: 60%;
  line-height: 35px;
}
.ety {
  font-size: 45px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}  
.ety1 {
  font-size: 25px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}
.ety2 {
  font-size: 20px;
  text-align: center;
  width: 55%;
  line-height: 35px;
  color: #0A4E80;
}
.wphead1 {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 93px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 5px;
  left: 0px;
  font-size: 200px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 215px;
  left: 0px;
  font-size: 96px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 265px;
  left: 0px;
  font-size: 153px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 50px;
  right: 0px;
  font-size: 35px;
  text-align: left;
  width: 40%;
  line-height: 35px;
}
.wpad1 {
 position: absolute;
  top: 600px;
  right: 0px;
  font-size: 45px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}
.wpad2 {
 position: absolute;
  top: 660px;
  right: 0px;
  font-size: 30px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}
.wpad3 {
 position: absolute;
  top: 790px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  text-align: center;
  width: 55%;
  line-height: 35px;
  color: #0A4E80;
}

.relmass1 {
  position: absolute;
  top: 105px;
  left: 130px;
  font-size: 32px;
  text-align: left;
  width: 24%;
  line-height: 30px;
}

.relmass2 {
  position: absolute;
  top: 305px;
  left: 130px;
  font-size: 29px;
  text-align: left;
  width: 25%;
  line-height: 27px;
}

.relmass3 {
  position: absolute;
  top: 550px;
  left: 130px;
  font-size: 28px;
  text-align: left;
  width: 25%;
  line-height: 25px;
}

.relmass4 {
  position: absolute;
  top: 810px;
  left: 130px;
  font-size: 28px;
  text-align: left;
  width: 25%;
  line-height: 25px;
}

.relcrd {
  position: absolute;
  top: 180px;
  right: 240px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}
.relphn {
  position: absolute;
  top: 360px;
  left: 750px;
  font-size: 20px;
  text-align: left;
  width: 17%;
  line-height: 25px;
}
.relhkey {
  position: absolute;
  top: 360px;
  right: 85px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}
.relckey {
  position: absolute;
  top: 860px;
  left: 790px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}
.relwlt {
  position: absolute;
  top: 835px;
  right: 143px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}

.cggleft {
  position: absolute;
  top: 320px;
  left: 300px;
  font-size: 17px;
  text-align: left;
  width: 8%;
  line-height: 20px;
}

.cggmid {
  position: absolute;
  top: 530px;
  left: 350px;
  font-size: 16px;
  text-align: right;
  width: 12%;
  line-height: 20px;
}
.cggright {
  position: absolute;
  top: 680px;
  right: 710px;
  font-size: 18px;
  text-align: right;
  width: 12%;
  line-height: 20px;
}

.cggbot {
  position: absolute;
  top: 800px;
  left: 15%;
  font-size: 25px;
  text-align: center;
  width: 45%;
  line-height: 25px;
  color: #0A4E80;
}

.cgg53 {
  position: absolute;
  top: 270px;
  right: 150px;
  font-size: 25px;
  text-align: center;
  width: 20%;
  line-height: 30px;
  color: white;
}

.cgg48 {
  position: absolute;
  top: 650px;
  right: 77px;
  font-size: 25px;
  text-align: center;
  width: 18%;
  line-height: 25px;
  color: white;
}

table, td, tr {
  background-color: white;
  text-align: center;
  font-size: 25px;
}

@media screen and (max-width: 768px) {

.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}

.cggh {
  position: absolute;
  top: 10px;
  left: 0px;
  font-size: 15px;
  text-align: center;
  width: 60%;
  line-height: 15px;
}

.cggi {
  position: absolute;
  top: 25px;
  left: 0px;
  font-size: 10px;
  text-align: center;
  width: 60%;
  line-height: 10px;
}
.ety {
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 5px;
}  
.ety1 {
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 5px;
}
.ety2 {
  font-size: 8px;
  text-align: center;
  width: 55%;
  line-height: 8px;
  color: #0A4E80;
}
.wphead1 {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 7px;
  left: 0px;
  font-size: 35px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 40px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 50px;
  left: 0px;
  font-size: 30px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 8px;
  text-align: left;
  width: 40%;
  line-height: 7px;
}
.wpad1 {
 position: absolute;
  top: 110px;
  right: 0px;
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 15px;
}
.wpad2 {
 position: absolute;
  top: 125px;
  right: 0px;
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}
.wpad3 {
 position: absolute;
  top: 160px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 8px;
  color: #0A4E80;
}
.relmass1 {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 8px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}

.relmass2 {
  position: absolute;
  top: 55px;
  left: 22px;
  font-size: 6.5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}

.relmass3 {
  position: absolute;
  top: 97px;
  left: 22px;
  font-size: 6.5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relmass4 {
  position: absolute;
  top: 145px;
  left: 24px;
  font-size: 6.5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relcrd {
  position: absolute;
  top: 30px;
  right: 12px;
  font-size: 5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relphn {
  position: absolute;
  top: 70px;
  left: 135px;
  font-size: 5px;
  text-align: left;
  width: 17%;
  line-height: 5px;
}
.relhkey {
  position: absolute;
  top: 61px;
  right: 13px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relckey {
  position: absolute;
  top: 158px;
  left: 143px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relwlt {
  position: absolute;
  top: 150px;
  right: 26px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.cggleft {
  position: absolute;
  top: 55px;
  left: 55px;
  font-size: 5px;
  text-align: left;
  width: 9%;
  line-height: 5px;
}
.cggmid {
  position: absolute;
  top: 88px;
  left: 65px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggright {
  position: absolute;
  top: 110px;
  right: 135px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggbot {
  position: absolute;
  top: 145px;
  left: 15%;
  font-size: 7px;
  text-align: center;
  width: 60%;
  line-height: 7px;
  color: #0A4E80;
}
.cgg53 {
  position: absolute;
  top: 48px;
  right: 27px;
  font-size: 6px;
  text-align: center;
  width: 20%;
  line-height: 6px;
  color: white;
}
.cgg48 {
  position: absolute;
  top: 118px;
  right: 17px;
  font-size: 5px;
  text-align: center;
  width: 18%;
  line-height: 5px;
  color: white;
}
table, td, tr {
  background-color: white;
  text-align: center;
  font-size: 10px;
}
}
@media screen and (max-width: 481px) {
.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}

.cggh {
  position: absolute;
  top: 10px;
  left: 0px;
  font-size: 15px;
  text-align: center;
  width: 60%;
  line-height: 15px;
}

.cggi {
  position: absolute;
  top: 25px;
  left: 0px;
  font-size: 10px;
  text-align: center;
  width: 60%;
  line-height: 10px;
}
.ety {
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}  
.ety1 {
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}
.ety2 {
  font-size: 8px;
  text-align: center;
  width: 55%;
  line-height: 8px;
  color: #0A4E80;
}
.wphead1 {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 7px;
  left: 0px;
  font-size: 35px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 40px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 50px;
  left: 0px;
  font-size: 30px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 8px;
  text-align: left;
  width: 40%;
  line-height: 7px;
}
.wpad1 {
 position: absolute;
  top: 110px;
  right: 0px;
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 15px;
}
.wpad2 {
 position: absolute;
  top: 125px;
  right: 0px;
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}
.wpad3 {
 position: absolute;
  top: 160px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 8px;
  color: #0A4E80;
}
.relmass1 {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 7px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}

.relmass2 {
  position: absolute;
  top: 58px;
  left: 22px;
  font-size: 5px;
  text-align: left;
  width: 25%;
  line-height: 5px;
}

.relmass3 {
  position: absolute;
  top: 102px;
  left: 23px;
  font-size: 5px;
  text-align: left;
  width: 25%;
  line-height: 5px;
}
.relmass4 {
  position: absolute;
  top: 147px;
  left: 24px;
  font-size: 5px;
  text-align: left;
  width: 25%;
  line-height: 5px;
}
.relcrd {
  position: absolute;
  top: 25px;
  right: 12px;
  font-size: 5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relphn {
  position: absolute;
  top: 70px;
  left: 135px;
  font-size: 5px;
  text-align: left;
  width: 17%;
  line-height: 5px;
}
.relhkey {
  position: absolute;
  top: 61px;
  right: 13px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relckey {
  position: absolute;
  top: 158px;
  left: 143px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relwlt {
  position: absolute;
  top: 150px;
  right: 26px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.cggleft {
  position: absolute;
  top: 55px;
  left: 55px;
  font-size: 5px;
  text-align: left;
  width: 9%;
  line-height: 5px;
}
.cggmid {
  position: absolute;
  top: 88px;
  left: 65px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggright {
  position: absolute;
  top: 110px;
  right: 135px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggbot {
  position: absolute;
  top: 145px;
  left: 15%;
  font-size: 7px;
  text-align: center;
  width: 60%;
  line-height: 7px;
  color: #0A4E80;
}
.cgg53 {
  position: absolute;
  top: 48px;
  right: 27px;
  font-size: 6px;
  text-align: center;
  width: 20%;
  line-height: 6px;
  color: white;
}
.cgg48 {
  position: absolute;
  top: 118px;
  right: 17px;
  font-size: 5px;
  text-align: center;
  width: 18%;
  line-height: 5px;
  color: white;
}
table, td, tr {
  background-color: white;
  text-align: center;
  font-size: 6px;
}
}
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%" />
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br />No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;" />
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2"><b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3"><b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd"><b>Your Beautiful Business Card</b><br />Size: 2" x 3.5"<br />Weight: 0.05216 oz</div>
<div class="relphn"><b>Your customers' 1000+ dollar phone</b><br />Size: 5.95" x 2.76"<br />Weight: 6.84 oz</div>
<div class="relhkey"><b>Your customers' key to their very expensive home</b><br />Size: 1.38" x 2.76"<br />Weight: 0.246918 oz</div>
<div class="relckey"><b> Your customers' key to their very expensive car</b><br />Size: 54mm<br />Weight: 3.80 oz</div>
<div class="relwlt"><b>The thing that holds your customers' money and important personal information</b><br />Size: 3.5" x 4.5"<br />Weight: 5 oz</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%" />
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br />handwritten note for maximum oxytocin levels)</div>
</div>
<div class="ety">EMPLOYEE THANK YOU'S.</div>
<br />
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div>
<br /><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br />
<table width="100%">
<tbody>
<tr>
<td width="33%"><b>High Five</b><br />Surface is covered in germs <br />which spread on contact.</td>
<td width="33%"><b>Pizza Party</b><br />While everyone loves pizza, <br />the effects are not long-lasting.</td>
<td width="33%"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br /> Made of durable material that lasts,<br /> it is very functional with their lifestyle,<br /> and can be given with the company logo.</td>
</tr>
</tbody>
</table>
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/employee_icons.png?v=1604957829" alt="EIcons" width="100%" />
Questioner
Noob Pat
Viewed
0
分享
A Haworth 2020-12-03 21:19:40

The problem is to find styling that works at different viewport sizes. The question included some initial HTML but not the styling from another site and some styling that had been applied on top.

The problem is that the styling applied in the question used fixed units in some places, but the original site uses entirely relative sizing, including for font sizes, relative to the viewport. This was necessary because, although 'modern' CSS was used where appropriate (e.g. grid), relative positioning and sizing had to be applied where it was required to position text correctly over a couple of GIFs.

If we don't use the style element given in the question, but use the styling for the main element in the original website we get (almost) what is required - i.e. someone has already done the work of finding out where the text overlaid on the GIFs should be and it's all there relatively positioned.

Here's the whole thing. A few adjustments are needed to get padding right and I had to correct an error in the original CSS (missing ; and object-fit applied to the containing element rather than the img itself) but otherwise things seem to be in the right place and work on resizing, though you may want to think about what should actually happen at the one break point which is used here, 600px width.

<main class="main-content mobile-main " style="margin-top: initial; padding-top: 0px;">

<!-- /templates/page.liquid -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  #PageContainer {
    background-color: #ffffff;
}
</style>

<div class="grid--full section__standard-spacing--even">
    <div class="rte page-text">
<style>
:root {
    --swiper-navigation-size: 44px;
}
* {
  box-sizing: border-box;
}
.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}
.wphead1 {
  position: absolute;
  top: 0%;
  left: 0%;
  font-size: 5.05vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 3%;
  left: 0%;
  font-size: 10.8vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 23.5%;
  left: 0%;
  font-size: 5.2vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 28.5%;
  left: 0px;
  font-size: 8.2vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 5%;
  right: 0%;
  font-size: 1.4vw;
  text-align: left;
  width: 35%;
}
.wpad1 {
 position: absolute;
  top: 65%;
  right: 0%;
  font-size: 3vw;
  text-align: center;
  width: 100%;
}
.wpad2 {
 position: absolute;
  top: 74%;
  right: 0%;
  font-size: 2vw;
  text-align: center;
  width: 100%;
}
.wpad3 {
 position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2vw;
  text-align: center;
  width: 55%;
  color: #0A4E80;
}

.relmass1 {
  position: absolute;
  top: 10%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  line-height: 100%;
  width: 25%;
}

.relmass2 {
  position: absolute;
  top: 28%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass3 {
  position: absolute;
  top: 50.8%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass4 {
  position: absolute;
  top: 74%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relcrd {
  position: absolute;
  top: 17.8%;
  right: 3.8%;
  font-size: 1vw;
  text-align: left;
  width: 30%;
  line-height: 100%;
}
.relphn {
  position: absolute;
  top: 34%;
  left: 43.3%;
  font-size: 1vw;
  text-align: left;
  width: 17%;
  line-height: 100%;
}
.relhkey {
  position: absolute;
  top: 34%;
  right: .8%;
  font-size: 1vw;
  text-align: left;
  width: 24%;
  line-height: 100%;
}
.relckey {
  position: absolute;
  top: 82%;
  left: 45.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}
.relwlt {
  position: absolute;
  top: 81%;
  right: 8.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}

.cggh {
  position: absolute;
  top: 6%;
  left: 0%;
  font-size: 3vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}

.cggi {
  position: absolute;
  top: 13%;
  left: 0%;
  font-size: 2vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}
  
.cggleft {
  position: absolute;
  top: 35%;
  left: 17%;
  font-size: 1vw;
  text-align: left;
  width: 8%;
  line-height: 100%;
}

.cggmid {
  position: absolute;
  top: 58%;
  left: 20%;
  font-size: 1vw;
  text-align: right;
  width: 13%;
  line-height: 100%;
}
  
.cggright {
  position: absolute;
  top: 73%;
  right: 41%;
  font-size: 1vw;
  text-align: right;
  width: 12%;
  line-height: 100%;
}

.cggbot {
  position: absolute;
  bottom: 3%;
  left: 15%;
  font-size: 1.5vw;
  text-align: center;
  width: 45%;
  line-height: 100%;
  color: #0A4E80;
}

.cgg53 {
  position: absolute;
  top: 30%;
  right: 9%;
  font-size: 1.3vw;
  text-align: center;
  width: 20%;
  line-height: 100%;
  color: white;
}

.cgg48 {
  position: absolute;
  top: 71%;
  right: 5%;
  font-size: 1.3vw;
  text-align: center;
  width: 18%;
  line-height: 100%;
  color: white;
}
  
  
.ety {
  font-size: 2.5vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}  
.ety1 {
  font-size: 1.7vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}
.ety2 {
  font-size: 1.3vw;
  text-align: center;
  width: 55%;
  line-height: 100%;
  color: #0A4E80;
}
  

.grid-container {
  display: grid;
  rgrid-template-columns: auto auto auto;
  width: 100%;
}
.grid-item {
  font-size: 1.5vw;
  text-align: center;
}

.grid-item img {
  object-fit: contain;
  width: 10vw;
  rwidth: 33.33%;
}
@media only screen and (max-width: 600px) {
  .container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}
.wphead1 {
  position: absolute;
  top: 0%;
  left: 0%;
  font-size: 4.2vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 3%;
  left: 0%;
  font-size: 9vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 21%;
  left: 0%;
  font-size: 4.3vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 27%;
  left: 0px;
  font-size: 6.8vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 0%;
  right: 0%;
  font-size: 1.4vw;
  text-align: left;
  width: 45%;
}
.wpad1 {
 position: absolute;
  top: 60%;
  right: 0%;
  font-size: 3vw;
  text-align: center;
  width: 100%;
}
.wpad2 {
 position: absolute;
  top: 68%;
  right: 0%;
  font-size: 2vw;
  text-align: center;
  width: 100%;
}
.wpad3 {
 position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  text-align: center;
  width: 55%;
  color: #0A4E80;
}

.relmass1 {
  position: absolute;
  top: 10%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  line-height: 100%;
  width: 25%;
}

.relmass2 {
  position: absolute;
  top: 28%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass3 {
  position: absolute;
  top: 50.8%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass4 {
  position: absolute;
  top: 74%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relcrd {
  position: absolute;
  top: 17.8%;
  right: 3.8%;
  font-size: 1vw;
  text-align: left;
  width: 30%;
  line-height: 100%;
}
.relphn {
  position: absolute;
  top: 34%;
  left: 43.3%;
  font-size: 1vw;
  text-align: left;
  width: 17%;
  line-height: 100%;
}
.relhkey {
  position: absolute;
  top: 34%;
  right: .8%;
  font-size: 1vw;
  text-align: left;
  width: 24%;
  line-height: 100%;
}
.relckey {
  position: absolute;
  top: 82%;
  left: 45.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}
.relwlt {
  position: absolute;
  top: 81%;
  right: 8.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}

.cggh {
  position: absolute;
  top: 6%;
  left: 0%;
  font-size: 3vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}

.cggi {
  position: absolute;
  top: 13%;
  left: 0%;
  font-size: 2vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}
  
.cggleft {
  position: absolute;
  top: 35%;
  left: 17%;
  font-size: 1vw;
  text-align: left;
  width: 8%;
  line-height: 100%;
}

.cggmid {
  position: absolute;
  top: 58%;
  left: 20%;
  font-size: 1vw;
  text-align: right;
  width: 13%;
  line-height: 100%;
}
  
.cggright {
  position: absolute;
  top: 73%;
  right: 41%;
  font-size: 1vw;
  text-align: right;
  width: 12%;
  line-height: 100%;
}

.cggbot {
  position: absolute;
  bottom: 3%;
  left: 15%;
  font-size: 1.5vw;
  text-align: center;
  width: 45%;
  line-height: 100%;
  color: #0A4E80;
}

.cgg53 {
  position: absolute;
  top: 30%;
  right: 9%;
  font-size: 1.3vw;
  text-align: center;
  width: 20%;
  line-height: 100%;
  color: white;
}

.cgg48 {
  position: absolute;
  top: 71%;
  right: 5%;
  font-size: 1.3vw;
  text-align: center;
  width: 18%;
  line-height: 100%;
  color: white;
}
  
  
.ety {
  font-size: 3vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}  
.ety1 {
  font-size: 2vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}
.ety2 {
  font-size: 1.5vw;
  text-align: center;
  width: 55%;
  line-height: 100%;
  color: #0A4E80;
}
  

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 100%;
}
.grid-item {
  font-size: 1.5vw;
  text-align: center;
  object-fit: contain;
}
.grid-item img {
  object-fit: contain;
}
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 100%;
}
.grid-item {
  font-size: 1.5vw;
  text-align: center;
  object-fit: contain;/* wrong place */
}
.grid-item img {
  object-fit: contain;
}  
  
</style>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%">
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br>No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;">
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2">
<b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3">
<b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd">
<b>Your Beautiful Business Card</b><br>Size: 2" x 3.5"<br>Weight: 0.05216 oz</div>
<div class="relphn">
<b>Your customers' 1000+ dollar phone</b><br>Size: 5.95" x 2.76"<br>Weight: 6.84 oz</div>
<div class="relhkey">
<b>Your customers' key to their very expensive home</b><br>Size: 1.38" x 2.76"<br>Weight: 0.246918 oz</div>
<div class="relckey">
<b> Your customers' key to their very expensive car</b><br>Size: 54mm<br>Weight: 3.80 oz</div>
<div class="relwlt">
<b>The thing that holds your customers' money and important personal information</b><br>Size: 3.5" x 4.5"<br>Weight: 5 oz</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%">
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br>handwritten note for maximum oxytocin levels)</div>
</div><br><br>
      
<!-- Not attached to any card, free floating -->      

<div class="ety">EMPLOYEE THANK YOU'S.</div>
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br><br>
  <div class="grid-container">
  <div class="grid-item"><b>High Five</b><br>Surface is covered in germs <br>which spread on contact. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/hands_1.png?v=1606939061" height=""></div>
  <div class="grid-item"><b>Pizza Party</b><br>While everyone loves pizza, <br>the effects are not long-lasting. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/pizza_1.png?v=1606939061"></div>
  <div class="grid-item"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br> Made of durable material that lasts,<br> it is very functional with their lifestyle,<br> and can be given with the company logo. <br><br>  <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/drinkwear_1.png?v=1606939061"></div><br>
  </div>
  </div></div>
</main>

Note: the original website put style elements in amongst HTML which isn't the done thing nowadays so some tidying up is needed there.

Noob Pat 2020-12-03 16:50:42

Yeah I spent about 6 hours yesterday editing everything. It works exactly how I wanted it to, THANK YOU!

A Haworth 2020-12-03 17:05:16

Glad it worked, the GIFs are interesting - but somewhat tricky to get the text properly aligned so I'm please someone else did it for us!

热门帖子

1
推荐一些好玩的/大众的手游
2
求指教后端项目迁移方案
3
迷你洗衣机是不是都是智商税？
4
求助一个排查了半年没解决的 MySQL order by 子句导致索引失效的问题， 500 多万条记录的小表要查快两分钟
5
个人开发了一款 WordPress 主题： iPao，集成了 AI 总结功能
6
偶然发现奇游加速器会在系统里植入根证书
7
国内有蒲公英替代品推荐吗？
8
语音助手这个东西真的会监听谈话并且上传，从而泄漏隐私吗？
9
出一些有意思的域名-明盘
10
jetbrains 全家桶升级 2024 后，在滚动代码时候感觉有点掉帧

热门github

1
A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input
2
Dev tool that writes scalable apps from scratch while the developer oversees the implementation
3
shadcn/ui, but for Svelte. ✨
4
The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems.
5
Performance-portable, length-agnostic SIMD with runtime dispatch
6
ZK Credo
7
OpenCodeInterpreter: Integrating Code Generation with Execution and Refinement
8
Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.
9
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.
10
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
11
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
12
🎓 Path to a free self-taught education in Computer Science!
13
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
14
A collective list of free APIs
15
📚 Freely available programming books