Highlighted

Problems with image alignment

Community Beginner ,
Sep 19, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

Views

214

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Problems with image alignment

Community Beginner ,
Sep 19, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

Views

215

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 19, 2019 0
Community Beginner ,
Sep 19, 2019

Copy link to clipboard

Copied

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;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2019 0
Adobe Community Professional ,
Sep 19, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2019 2
jodmcc49 LATEST
Community Beginner ,
Sep 20, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 20, 2019 0