The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Webpage header/footer centering issue
JablesFTW
post Jun 19 2018, 01:52 PM
Post #1





Group: Members
Posts: 1
Joined: 19-June 18
Member No.: 26,662



Hello all. I'm currently filling in for a co-worker who normally handles this, and my knowledge of HTML is basic at best.

I set up Recall webpages for our clients, and we have a generic template we send to the providers to implement on their webpage.

This one particular store is having issues, as our webpage is causing their header and footer to move to the left and be off-center.

I was hoping you could help locate the issue in our html that's causing this. I need to add our code to their webpage without it causing the header and footer to be off-center.

The url is https://www.browningmazda.com/check-vehicle-for-recalls.htm and the html for our webpage is as follows. Thank you in advance for any help:

<!--Styles for Recall Page -->
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Archivo+Narrow|Yellowtail');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* Reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}
/* End Reset */

/* Special CSS */
input, button, select, textarea{line-height: 160%!important;}
.title-page{display:none;}
.container, .ddc-container{width: 100%;}
.header-default, .ddc-page-body{width: 100%!important;}
#content{max-width: 100%!important;}
.MaxWidth{width: 100%!important;}
.home-content{max-width: 100%!important;}
.ddc-page-body{width: 100%!important;}
.container.main, .main.ddc-container{width: 100%!important;}
.content-page-title.ddc-content{display: none;}
.ddc-container{width: 100%;}

/* End Special CSS */

/* General CSS */
section#wrapper{font-family: 'Archivo Narrow', sans-serif;margin: 50px 0;}
section#wrapper h1{font-size: 28px;}
section#wrapper h2{font-size: 28px;margin: 0!important;}
section#wrapper h3{font-size: 22px; font-style: italic;}
section#wrapper p{margin: 20px 0; line-height: 1.5;}
.clear{clear:both;}
/* End General CSS */

/* Main Style */
main#col_1_images_message{float: left;display: block;}
main#col_1_images_message p{font-size: 20px; text-align: justify;}
main#col_1_images_message h1.message-h1{margin: 0 0 10px 0; background-color: #333; padding: 20px;color: #fff;background-image: url("https://www.recallmasters.com/recall-page-images/subtle_carbon.png");background-repeat: repeat;}
main#col_1_images_message p.cursive{font-family: 'Yellowtail', cursive; font-size: 30px;}
article{padding: 0 0 0 20px;}
img.main-image{width: 100%;}
img.oem-cert{width: 70%;}
img.main-image-mobile{width: 100%;margin-bottom: 25px;}
/* End Main Style */

/* Aside Style */
aside{width: 50%; float: right;display: block;}
div.recallMastersWidget div.form{margin: 0!important;max-width: 100%!important;}
div.recallMastersWidget div.page1 input[type=text]{width: 100%;height: 60px!important; font-size: 25px;border: 1px solid red!important;box-shadow: 5px 10px 18px #888888;}
div.recallMastersWidget div.page1 div.form div{margin: 0!important;}
div.recallMastersWidget *{text-align: left!important;}
div.recallMastersWidget div.page1 div.form p.label{font-size: 20px!important; padding: 0!important;}
div.recallMastersWidget div.page1 p.more{color: blue;}
.page1 h1{display:none!important;}
div.steps_header_box{background-color: #333; color: #fff;padding: 20px; margin-bottom: 40px;background-image: url("https://www.recallmasters.com/recall-page-images/subtle_carbon.png");background-repeat: repeat;}
section#step-2, section#step-3{margin-top: 40px;}
ul.amenities{margin-top: 20px;font-size: 20px;}
a.phone-number{color: #fff;}
iframe{float: left;}
#vin-check-media{width: 100%;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-align: center;
font-size: 25px;
}
::-moz-placeholder { /* Firefox 19+ */
text-align: center;
font-size: 25px;
}
:-ms-input-placeholder { /* IE 10+ */
text-align: center;
font-size: 25px;
}
:-moz-placeholder { /* Firefox 18- */
text-align: center;
font-size: 25px;
}
aside ul li{background: url('https://www.recallmasters.com/recall-page-images/checkmark.png') left center no-repeat;padding:5px 5px 5px 30px; list-style-type: none;}
/* End Aside Style */

/* Breakpoints */
.col-5 {width: 42%;}
.col-6 {width: 50%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
article{padding: 0;}
.main-image{display: none;}
main#col_1_images_message{margin-bottom: 30px;}
div.recallMastersWidget div.page1 div.form div{max-width: 100%!important;}
div.recallMastersWidget div.page1 input[type=text]{margin: 0!important;}
}
@media screen and (min-width: 768px) {
.main-image-mobile{display: none;}
div.recallMastersWidget div.page1 div.form div{max-width: 70%!important;}
}
@media only screen and (max-width: 1400px){img.vin-check{width: 100%;}}
@media screen and (min-width: 1401px){img.vin-check{width: 55%;}}
/* End Breakpoints */
</style>
<!--End Style for Recall Page -->

<!-- Main Content Area -->
<section id="wrapper">
<!-- Mobile Image -->
<div class="mobile"><a href="tel:9545046669"><img src="https://www.recallmasters.com/recall-page-images/800x330.jpg" class="main-image-mobile"></a></div>
<!-- End Mobile Image--->
<!-- Column 1 Images and Message -->
<main id="col_1_images_message" class="col-5">
<h1 class="message-h1">Browning Mazda Recall Department</h1>
<div class="desktop"><img src="https://www.recallmasters.com/recall-page-images/800x300-desktop.jpg" class="main-image"></div>

<article>
<p class="">Dear Valued Customer,</p>
<p>As a member of our community, <strong>Browning Mazda</strong> is committed to making the safety of you and your family, as well as your vehicle ownership experience, as great as possible. This is why we are proud to announce the opening of a unique Recall Department at our dealership. Our specially-trained staff is prepared with the knowledge and parts necessary to service your vehicle, and our goal is to make this experience both hassle-free and enjoyable despite the inconvenience of having recall repair work completed on your vehicle.</p>
<p>Our Recall Department offers fast and convenient shuttle transportation to and from your home or work, will wash your vehicle before it is delivered back to you and will perform a multi-point inspection to determine if anything else may require repair on your vehicle. Our mission is to ensure that your vehicle is returned to you in the best condition possible so that you can safely get back on the roads with peace of mind. </p>
<p><strong>Sincerely,</strong></p>
<p class="cursive"><strong>Browning Mazda</strong></p>
</article>
<img src="https://www.recallmasters.com/recall-page-images/Makes/533x153-mazda.png" class="oem-cert">
</main>
<!-- End Column 1 Images and Message -->

<!-- Column 2 Steps Widget -->
<aside class="col-6">
<section id="step-1">
<div class="steps_header_box">
<h2><i class="fa fa-search" aria-hidden="true"></i> STEP 1 | Locate your VIN number.</h2>
</div>
<div id="vin-check-media">
<iframe src="https://player.vimeo.com/video/235633451?byline=0&portrait=0" frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<img src="https://www.recallmasters.com/recall-page-images/vin-check.png" class="vin-check">
</div>
<div class="clear"></div>
</section>
<section id="step-2">
<div class="steps_header_box">
<h2><i class="fa fa-check-circle-o" aria-hidden="true"></i> STEP 2 | Submit to check eligibility.</h2>
</div>
<div>
<script src="https://app.recallmasters.com/widget-021e6ffd173d3a5d7af627350e6e15cb9fb8c988.js"></script>
</div>
</section>
<section id="step-3">
<div class="steps_header_box">
<h2><i class="fa fa-phone" aria-hidden="true"></i> STEP 3 | Call us!&nbsp;&nbsp;<a href="tel:5623623337" class="phone-number">(562) 362-3337</a></h2>
</div>
<div class="step3_info">
<div class="callout">
<h3>Why remedy your recall with us?</h3>
</div>
<ul class="amenities">
<li>Complimentary Shuttle Service</li>
<li>Complimentary Multi-Point Inspection</li>
<li>Free Wi-Fi and Cable TV's in the lounge area</li>
<li>Complimentary Coffee and Refreshments</li>
<li>Expansive parts inventory</li>
<li>Flexible scheduling and extended service hours</li>
</ul>
</div>

</section>
</aside>
<!-- End Column 2 Steps Widget -->
<div class="clear"></div>
</section>
<!-- End Main Content Area-->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:48 PM