Skip to main content
Inspiring
September 20, 2019
Answered

Problems with image alignment

  • September 20, 2019
  • 2 replies
  • 877 views

http://www.renegadescookingteam.com/sponspack_b.html

I have set the divs the same for the Platinum, Gold, Silver, Bronze and Date Night images, but the Friday and Saturday images are not centering. I have margins set 0 top, 0 bottom, left auto, right auto and display to block. The settings are the same as the Platinum, Gold, Silver and Bronze except for height and width for image are 50% and the Friday and Saturday are 30%. Any help would be appreciated. The page is in Bootstrap 3.

 

Thanks,

John

    This topic has been closed for replies.
    Correct answer BenPleysier

    On line 172 and 188 give the paragraph a class of sponsorsub

    2 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    September 20, 2019

    On line 172 and 188 give the paragraph a class of sponsorsub

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    jodmcc49Author
    Inspiring
    September 20, 2019
    Thanks Ben, I really do appreciate it!!! Been away from it for about a year taking care of mom and got out of the mode.
    jodmcc49Author
    Inspiring
    September 20, 2019

    Forgot to add the css:

    @charset "UTF-8";
    body {
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
    padding-top: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
    font-size: 1rem;/*font-size is 16px*/
    max-width: 1200px;
    }
    .header-footer-image {
    padding: 0;
    }
    #adobe1 img, #adobe2 img {/*Sizing for Adobe Acrobat PDF image. Not allowed in HTML 5*/
    width: 31px;
    height: 31px;
    }
    #adobe3 img {/*Sizing for Get Adobe Acrobat Reader image. Not allowed in HTML 5*/
    width: 88px;
    height: 31px;
    }
    input[type=image] {
    border: 0;/*removing border from input images in PayPal shopping cart. Not allowed in HTML 5*/
    }
    form img {
    border: 0;/*remove image borders in PayPal form images. Not allowed in HTML 5*/
    }
    .navbar-default {
    background-color: #CFAF86;
    min-height: 0em;
    }
    .navbar-default .navbar-nav > li > a {
    color: #000000;/*original text link color*/
    font-size: .8125rem;/*13px text*/
    padding-left: .6875rem;/*11px padding*/
    padding-right: .6875rem;/*11px padding*/
    padding-top: .625rem;/*10px padding*/
    padding-bottom: .625rem;/*10px padding*/
    text-align: center;
    }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
    color: #000000;/*text color on hover*/
    background-color: #e6cca1;/*background color on hover*/
    }
    .navbar-default .navbar-nav > .active > a ,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus{
    color: #000000;/*text color on active and hover*/
    background-color: #e6cca1;/*background color on active and hover*/
    }
    #timer {
    margin-top: .625rem;
    padding-right: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: auto;
    padding-left: auto;
    font-family: Georgia, "Times New Roman", Times, serif;
    allowTransparency: true;/*Moved to CSS. Not allowed in HTML 5*/
    frameborder: 0;/*Moved to CSS. Not allowed in HTML 5*/
    }
    .panel > .panel-heading {
    background-image: none;/*MUST BE SET TO NONE TO CHANGE COLOR*/
    background-color: #CFAF86;/*COLLAPSE HEADING BACKGROUND COLOR*/
    color: white;/*HEADING TEXT COLOR*/
    }
    .strong {
    font-weight: bold;
    }
    .team {
    width: 100%;
    height: 100%;
    }
    .teamnames {
    font-size: 100%;
    font-weight:500;
    font-variant:small-caps;
    text-align: center;
    }
    .teamduesimage {
    height: 2em;
    width: 5.785714em;
    border: 0;
    }
    .center {
    text-align: center;
    }
    .sponsorintro-sun {
    padding-left: auto;
    padding-right: auto;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    text-align: center;
    }
    .sponsorsub {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.071428em;
    font-style: oblique;
    line-height: 1.214285em;
    font-weight: bolder;
    color: #000;
    text-align: center;
    }
    .packageformimgplatinum {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    height: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    }
    .packageformimggold {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    height: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    }
    .packageformimgsilver {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    height: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    }
    .packageformimgbronze {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    height: 50%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    }
    .packageformimgfriday {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 30%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    height: 30%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    }
    .packageformimgsaturday {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 30%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    height: 30%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    }
    .packageformimgtodonate {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 40%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    height: 40%;/*Sizing removed from HTML. Not allowed in HTML 5*/
    }
    .progress-bar-vertical {
    width: 40px;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    margin-left: auto;
    margin-right: auto;
    }

    .progress-bar-vertical .progress-bar {
    width: 100%;
    height: 0;
    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;
    }
    .fundraisemeter {
    font-size: 1.25em;
    line-height: 0.214em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    .underwriter-paragraph {
    font-size: 1.28em;
    text-align: center;
    font-variant: small-caps;
    color: rgba(251,0,0,1.00);
    font-weight: 600;
    }
    .sponsor-boards {
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    }
    .required {
    color: red;
    font-weight: bold;
    }
    .center-block {
    float: none;
    }
    .human {
    margin: 0 0 0 12px;
    }
    .img-thumbnail {
    padding: 4 px;
    height: auto;
    max-width: 75%;
    display: inline-block;
    }
    .modal-header {
    font-size: 24px;
    }
    .container-fluid {
    max-width: 1200px;
    }
    @media (min-width:320px) {
    .col-xs-4 {
    padding-left: .714285em;
    padding-right: .714285em;
    }
    footer {
    margin-left: 0em;
    margin-right: 0em;
    font-size: .857142em;
    background-color: #CFAF86;
    padding-top: .285714em;
    padding-bottom: .285714em;
    text-align: center;
    }
    }
    @media (min-width: 480px) {
    body {
    font-size: 1.063rem;
    }
    .navbar-default .navbar-nav > li > a {
    color: #000000;/*original text link color*/
    font-size: .875rem;/*14px text*/
    padding-left: .75rem;/*12px padding*/
    padding-right: .75rem;/*12px padding*/
    padding-top: .687rem;/*11px padding*/
    padding-bottom: .687rem;/*11px padding*/
    text-align: center;
    }
    .teamduesimage {
    height: 42px;
    width: 122px;
    }
    }
    @media (min-width: 640px) {
    body {
    font-size: 1.188rem;
    }
    .navbar-default .navbar-nav > li > a {
    color: #000000;/*original text link color*/
    font-size: 1rem;/*16px text*/
    padding-left: 1.25rem;/*20px padding*/
    padding-right: 1.25rem;/*20px padding*/
    padding-top: .8125rem;/*13px padding*/
    padding-bottom: .8125rem;/*13px padding*/
    text-align: center;
    }
    }
    @media (min-width: 992px) {
    body {
    font-size: 1.25rem;
    }
    .navbar-default .navbar-nav > li > a {
    color: #000000;/*original text link color*/
    font-size: 1.125rem;/*18px text*/
    padding-left: 1.375rem;/*22px padding*/
    padding-right: 1.375rem;/*22px padding*/
    padding-top: .8125rem;/*13px padding*/
    padding-bottom: .8125rem;/*13px padding*/
    text-align: center;
    }
    }
    @media (min-width: 1200px) {
    body {
    font-size: 1.313rem;
    }
    .navbar-default .navbar-nav > li > a {
    color: #000000;/*original text link color*/
    font-size: 1.25rem;/*20px text*/
    padding-left: 1.5rem;/*24px padding*/
    padding-right: 1.5rem;/*24px padding*/
    padding-top: .8125rem;/*13px padding*/
    padding-bottom: .8125rem;/*13px padding*/
    text-align: center;
    }
    }
    .underwriter-panel-directions {
    text-align: center;
    font-weight: bold;
    }