How to resize these images in CSS? - html

Question

My boss is having me update the company website since I know a little code, but I'm having trouble making the images bigger. This is the html code on the page:
<!----******* The Second Title Section -->
<!--<div style="width: 95%;overflow: hidden; margin:0 auto;" >
<div class="rightProduct">
<p class="partsTitle">Part Numbers and Manufacturers</p>
</div>
</div>-->
<!----******* The main product Section-->
<div class="apartmentInnerWrapper">
<div class="leftProduct">
<div class="flexslider">
<ul class="slides">
<li>
<img src="https://efuses.com/wp-content/uploads/2018/11/copper-bus-bar-500x500.jpg" alt="H05" width="320" height="240"/>
</li>
</ul>
</div>
</div>
<div class="rightProduct">
<br></br> <p class="categoryTitle">Copper Busbar - In Stock and Ready for Immediate Shipment</p>
<p class="communityHeader">
</p>
<div class="fuseDescription">
<span class="fuseDescriptionP">
<br>Cut to Length</br>
<br>Bent and Drilled to Your Specs</br>
<br>Custom Fabrication</br>
</span>
<span><br>
<img src="https://efuses.com/wp-content/uploads/2018/11/H05WhiteBG.jpg" alt="H05" class="myimage" />
<img src="https://efuses.com/wp-content/uploads/2018/11/H02WhiteBG.jpg" alt="H02" class="myimage" /></br>
</span>
<p></p>
<img src="https://efuses.com/wp-content/uploads/2016/06/Express_Shipping-150.png"><span>In Stock Item & Ready to Ship</span>
<p class="chatLink">For Instant Quote - Open the Chat Below<br>
Or Email Us at
<a href="#contact_form_pop" class="fancybox talkPerson" >quote#powerfuse.com</a><br>
Or Call Us at
<span class="number talkPerson">918-665-6888</span>
And here is the CSS script:
/*************
community Page CSS
************/
/* Contact Form */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
background-color: #fff;
border: 2px solid #2F3396;
color: #000;
width: 90%;
}
.site-header {
display: none;
}
.flexslider {
max-width: 600px;
margin: 0 auto 60px !important;
}
.site-inner {
padding: 0px !important;
max-width: 3000px !important;
}
a {
border-bottom: none !important;
text-decoration: none !important;
}
.communityMobileContainer {
display: none;
}
.communityContainer {
width: 100%;
margin: 0;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
.apartmentInnerWrapper {
width: 85%;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 10px 0px 20px 0px;
}
/*********************
Community Header
*********************/
.apartmentBanner {
width: 100%;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
}
.topBanner {
background-color: #2F3396;
height: 100px;/*F8C800*/
}
.bottomBanner {
background-color: #C1D0D3;
width: 100%;
padding: 5px 0;
/*position: relative;
top: -40px;*/
}
.bottomBanner a {
color: #2F3396 !important;
}
.apartmentPets,
.apartmentBannerMap,
.apartmentBannerPrice {
float: left;
width: 33%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentPets1,
.apartmentBannerMap1 {
float: left;
width: 25%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentBannerPrice1 {
float: left;
width: 50%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentPets a {
color: #fff;
}
.communityViewMap a {
color: #fff;
}
.talkSection > a{
padding-top: 10px !important;
color: #C1D0D3;
font-size: 30px;
}
.talkSection > a:hover {
color: #fff;
}
.talkSection .powerFuseBottom {
position: relative;
top: -29px;
}
.apartmentBannerMap {
padding-top: 4px;
}
.talkPerson {
font-size: 18px !important;
font-weight: 600 !important;
padding: 5px 10px 5px 0px !important;
border: 0 !important;
top: 0px !important;
color: #c3251d;
text-decoration: underline !important;
}
.communityViewMap .talkPerson {
font-size: 18px !important;
font-weight: 600 !important;
padding: 5px 10px 5px 0px !important;
border: 0 !important;
top: 0px !important;
color: #2F3396;
text-decoration: none !important;
}
a:hover {
color: #000;
cursor: pointer;
}
.apartmentPets {
padding-top: 4px;
}
/* End Banner */
.rightProduct .partsTitle {
margin: 10px 0 0px;
font-size: 24px;
font-weight: 400;
}
.learnAboutFact {
margin: 10px 0 0px;
font-size: 32px;
font-weight: 400;
color: #2F3396;
text-align: center;
display: block;
}
/* Product Desciption */
.communityContainer .categoryTitle {
font-size: 30px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
margin: 0px;
}
.communityContainer .categoryFuseTitle {
font-size: 26px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
margin: 0px;
padding: 35px 0 20px;
}
.communityContainer .leftProduct {
padding: 3px 12px;
width: 45%;
float: left;
overflow: hidden;
}
.communityContainer .leftProduct img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.communityContainer .rightProduct {
padding: 3px 12px;
width: 53%;
float: right;
overflow: hidden;
}
.fuseDescriptionP {
font-size: 22px;
font-weight: 500;
color: #000;
margin-bottom: 0px;
}
.fuseDescriptionP p {
margin-bottom: 0px;
}
.contactUsBanner{
text-align: center;
font-size: 22px;
font-weight: 500;
color: #000;
}
.contactUsBanner a {
padding: 10px 15px;
color: #000;
}
.contactUsBanner a:hover {
color: #2F3396;
}
/* End Product Description */
.communityContainer .communityHeader {
padding: 2px 12px 0 0;
margin: 0 0 0 0;
width: 100%;
float: left;
text-align: left;
}
.communityContainer .communityHeader .communityTitle {
font-size: 30px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
}
.communityContainer .fuseDescription p {
font-size: 16px;
}
/*********************
Community Description Section
*********************/
.communityContainer .fuseDescription{
width: 100%;
overflow: hidden;
padding: 0px 10px 5px 0px;
}
.communityContainer .fuseDescription myimages {
width: 400px;
height: 300px;
}
.communityContainer .fuseDescription span {
font-size: 20px;
font-weight: 400;
position: relative;
top: -15px;
padding: 0 0 0 15px;
}
.communityContainer .fuseDescription .chatLink {
font-size: 24px;
font-style: italic;
font-weight:600;
margin-bottom: 2px;
}
.communityContainer .fuseDescription p{
font-size: 16px;
}
.communityDescriptionHalf {
float: left;
width: 48%;
padding: 0px 4px;
}
.communityDescriptionThird {
float: left;
width: 32%;
padding: 0px 4px;
}
.communityDescription .communityPlansTitle {
padding: 3px 0 20px 0px;
width: 100%;
display: block;
clear: left;
}
.communityPlansDataLeft,
.communityPlansDataRight {
width: 48%;
float: left;
font-size: 16px;
font-weight: 400;
padding: 0 10px!important;
}
.communityPlansInfo h4{
font-size: 24px;
color: #004c71;
margin: 5px 0 2px 0 !important;
padding: 0 10px!important;
font-weight: 700;
text-align: center;
}
.communityPlansInfo p {
font-size: 18px;
margin: 0px 0 4px 0 !important;
padding: 0 10px!important;
font-weight: 600;
color: #000;
}
/* Footer */
.footer-widgets {
padding: 0px;
background-color: #C1D0D3;
}
.footer-widgets .wrap {
padding: 0px;
margin: 0px;
max-width: 3000px;
color: #fff;
}
.footer-widgets .wrap a {
padding: 0px;
margin: 0px;
max-width: 3000px;
color: #fff;
}
.footer-widgets-1 {
width: 100%;
float: left;
padding: 20px 4%;
text-align: center;
margin: 0px;
font-size: 22px;
color: #2F3396;
}
.footer-widgets-1 p {
margin-top: 5px;
margin-bottom: 20px;
}
.footer-widgets-1 .widgettitle {
text-align: center;
color: #2F3396;
}
.footer-widgets-2 {
width: 50%;
float: left;
padding: 20px 4% 0px;
margin: 0px;
font-size: 18px;
color: #2F3396;
}
.footer-widgets-2 .widgettitle {
color: #2F3396;
}
.footer-widgets-1 a:hover,
.footer-widgets-2 a:hover {
color: #000;
}
.footer-widgets-3{
width: 20%;
float: left;
padding: 20px 4% 0px;
margin: 0px;
font-size: 18px;
}
.footer-widgets-3 .widgettitle {
color: #2F3396;
}
.footer-widgets .widget {
margin-bottom: 10px;
}
.widgettitle {
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
font-size: 32px;
}
.site-footer {
background-color: #23282D;
color: #fff;
}
.site-footer a {
color: #fff;
}
/*********************
Mobile CSS
*********************/
#media (max-width: 1000px) {
.communityContainer .communityPhone {
text-align: center;
width: 100%;
padding: 12px 0;
clear: both;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3{
width: 100%;
clear: left;
text-align: center;
}
.widgettitle {
text-align: center !important;
padding-top: 20px;
}
.communityContainer .communityUrl {
text-align: center;
width: 100%;
padding: 12px 0;
clear: both;
}
}
#media (max-width: 800px) {
.apartmentInnerWrapper {
width: 100%;
padding-top: 25px;
}
.topBanner {
height: 190px;
}
.apartmentPets,
.apartmentBannerPrice,
.apartmentBannerMap {
clear: left;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 18px;
}
.communityDescriptionHalf {
clear: left;
width: 100%;
}
.communityDescriptionThird {
clear: left;
width: 100%;
}
.communityContainer .leftProduct {
clear: both;
width: 100%;
}
.communityContainer .rightProduct {
clear: both;
width: 100%;
padding: 0 0 25px 0;
}
.communityContainer .communityHeader {
width: 100%;
}
.communityContainer .communityHeader .communityBuilder {
padding: 6px 3px;
}
}
#media (max-width: 700px) {
.communityMobileContainer {
display: inline-block!important;
}
.communityContainer {
display: important;
}
#communityPlansAll {
width: 100%;
max-width: 500px;
margin: 2px auto 2px auto;
}
/*********************
End Mobile CSS
*********************/
}
/*******************
*******************
Fuse Category Page
*******************
*******************/
.allAgentsWrapper {
width: 100%;
padding: 0 0 75px;
overflow: hidden;
}
.allAgentsWrapper .allAgents {
width: 100%;
margin: 0 auto;
max-width: 1000px;
overflow: hidden;
padding: 40px 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.singleAgent {
padding: 20px 10px;
width: 200px;
height: auto;
}
.singleAgent .bpTitle{
text-align: center;
font-size: 16px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 7px;
color: #606060;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleAgent .bpImg {
width: 100%;
height: auto;
border: 1px solid #f6f6f6;
}
.singleAgent .fuseImageWrapper {
overflow: hidden;
min-height: 144px;
}
.singleAgent .bpDesc p {
font-size: 12px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 17px;
text-align: justify;
font-size: 12px;
margin-top: 5px;
margin-bottom: 5px;
}
.singleAgent .AgentTop {
width: 100%;
padding: 5px 0;
}
.singleAgent .AgentTop .leftTop {
float: left;
width: 50%;
margin: 0;
padding: 5px 0;
}
.singleAgent .AgentTop .rightTop {
float: right;
width: 50%;
margin: 0;
padding: 5px 0;
}
.singleAgent .bpPrice {
font-size: 16px;
text-align: center;
padding: 5px 0 0;
letter-spacing: 1px;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleAgent .bpLink {
padding: 7px 11px;
float: right;
font-size: 16px;
font-weight: 600;
color: #fff;
font-weight: 400;
text-decoration: none;
background-color: #faab37;
border-radius: 0;
font-family: Oswald,Tahoma,Arial,sans-serif;
text-shadow: 1px 1px rgba(0,0,0,.25);
border: 0;
outline: 0;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.singleAgent .bpLink:hover {
background-color: #000;
}
.singleAgent .bpIcons {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}
.singleAgent .bpIcon i {
font-size: 18px;
padding: 0 5px;
}
/* Single Agent Page */
.singleWrapper .topImage {
padding: 15px;
}
.singleWrapper .topSection {
padding: 5px 15px 15px;
}
.singleWrapper .topSection .bpTitle {
padding: 5px 0;
}
.singleWrapper .topSection .bpDesc {
padding: 5px 0 15px;
}
.singleWrapper .topSection .bpLink {
float: left;
padding: 7px 11px;
margin-top: 10px;
font-size: 16px;
font-weight: 600;
color: #fff;
font-weight: 400;
text-decoration: none;
background-color: #faab37;
border-radius: 0;
font-family: Oswald,Tahoma,Arial,sans-serif;
text-shadow: 1px 1px rgba(0,0,0,.25);
border: 0;
outline: 0;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.singleWrapper .topSection .bpPrice {
margin-left: 10px;
float: left ;
color: #606060;
font-size: 20px;
padding: 16px 0 0;
letter-spacing: 1px;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleWrapper .leftImage {
max-width: 300px;
}
.singleWrapper .rightSection {
max-width: 500px;
}
.singleWrapper .bpIcon i {
font-size: 22px;
padding: 0 5px 15px;
}
I tried adding this bit of code to the Community Description Section on the CSS file to see if it would work but it didn't.
.communityContainer .fuseDescription myimages {
width: 400px;
height: 300px;
}
Basically I'm flummoxed. Any help would be appreciated.
Here is a link to the page:
https://efuses.com/copperbusbar/
The two images in question are underneath the words Custom Fabrication.
Thanks!

Answer 1

I am inferring that since you have 2 images, you want to align them next to each other and have them occupy roughly half of the available space each. So a solution could be:
.communityContainer .fuseDescription img { display: inline-block; width: 49%; height: auto; }
First, you need a selector that correctly references and overwrites the current context, hence the 2 classes and an element. Then, displaying the images as inline-blocks allows them to respect the width and height specifications in all browsers. A width of 49% makes sure they both fit in a row snugly without pressing the outer margins. Height auto insures they keep their original proportion and don't get skewed.
Your error was the myimages selector which doesn't really exist in CSS, except if you wanted to specify the class name .myimages which would have also worked. The difference in approaches when using percentages vs pixels is the fact that the percentages adapt to the screen real estate available in varying contexts and browser sizes.
There are some other more advanced solutions based on the CSS grid specification that do the same trick for a variable amount of images on one "line" but I'm guessing you don't need that sort of complexity to solve this particular issue. :)