How do I keep the Image and Text Box the same height in desktop?

Site URL: https://numbersinboxes.com/our-success-stories

https://numbersinboxes.com/our-success-stories

pw: numbers

Hello, I'm trying to figure out how to keep the image and text box the same height in desktop while keeping it responsive. (I have it stack in tablet / mobile). Any help is appreciated, thank you!

On 5/1/2022 at 3:35 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (min-width:901px) {
div#block-e4c9b6de309c3d4a00b2+.row {display: flex;}
div#block-e4c9b6de309c3d4a00b2+.row .span-7 {background-color: rgba(114, 187, 213);}
div#block-e4c9b6de309c3d4a00b2+.row>.col {flex: 1;}
}

 

Thank you @tuanphan! This worked for the first row!

To do the second row, I copied your code and put in the block id for the spacer above the image/text block. The blue background isn't showing up. I can't figure out what I did wrong. Could you take a look?  

https://numbersinboxes.com/our-success-stories

pw: numbers

Appreciate it!

On 5/2/2022 at 9:57 PM, JHillArtDesign said:

Thank you @tuanphan! This worked for the first row!

To do the second row, I copied your code and put in the block id for the spacer above the image/text block. The blue background isn't showing up. I can't figure out what I did wrong. Could you take a look?  

https://numbersinboxes.com/our-success-stories

pw: numbers

Appreciate it!

Use this code for 2nd

@media screen and (min-width:901px) {
/* 2nd row */
div#block-yui_3_17_2_1_1651502943534_10988+.row {display: flex;}
div#block-yui_3_17_2_1_1651502943534_10988+.row .span-6 {background-color: rgba(114, 187, 213);}
div#block-yui_3_17_2_1_1651502943534_10988+.row>.col {flex: 1;}
}

@TUANPHAN THANK YOU!!

@tuanphan I've tried using the above code on a site section, and I'm not sure where it's going wrong. Prior to using the code above, I used other CSS to get the containers close to similar sizes, but I want to add this as an additional guarantee that the blocks will remain the same sizes responsively.

Site/Section: https://www.brookesilvermanphotography.com/northern-virginia-team#northern-va-team-work

Code: 

@media screen and (min-width:901px) {
div#block-yui_3_17_2_1_1656263204463_17534+.row {display: flex;}
div#block-yui_3_17_2_1_1656263204463_17534+.row .span-12 {background-color: #ffecdd;}
div#block-yui_3_17_2_1_1656263204463_17534+.row> .col {flex: 1;}
}

I have some other styling css for the image and text blocks. Pasting below in case it's interfering.

Other code in this section:

//Northern VA Team Work Background color//
#northern-va-team-work{
  background: #99753b;
  margin-bottom: -22vh;
}

//N VA Team Work Image border//
#block-yui_3_17_2_1_1656257133185_36113 img{
  border: 10px solid #ffecdd;
}
#block-yui_3_17_2_1_1656257133185_36113 
.has-aspect-ratio {
      overflow: visible !important;
  }
#block-yui_3_17_2_1_1656257133185_36113 
.image-block-wrapper {
    overflow: visible !important;}

//Northern va team work image margin right//

#block-yui_3_17_2_1_1656257133185_36113{
  margin-right: 1vh;
  margin-left: 1vh;
  height: auto;
  width: auto !important;
}

//northern va team work text background//

#block-62b876c4ad3f7437f1916c9b{
  background: #ffecdd;
  padding: 40px;
    margin-top: 1.89vh;
  margin-right: 1vh;
  padding-bottom:43px;
  margin-bottom: 8vh;
  margin-left: -1vh;
}

//Nothern VA team work h1//
#block-62b876c4ad3f7437f1916c9b h1{
color: #3f4f3b;
  padding-top: 15px;    
  font-size: 6vh;
  line-height: 5.8vh;
}

//Northern VA p team work//
#block-62b876c4ad3f7437f1916c9b
p{
  line-height: 1.3em !important;
  font-size: .9em;
  margin-top: -5px;
  color: black;
}

//Northern VA H3 team work//
#block-62b876c4ad3f7437f1916c9b
h3{
  margin-top: 4vh;
  font-family:"nexa";
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.5em !important;
  font-size: .9em;
  color: #99753b;
}

//Northern VA Margin bottom spacer//
#block-yui_3_17_2_1_1657232578207_5360{
margin-bottom: -6vh;
}

Thanks for any insight!

13 hours ago, jessmileur said:

@tuanphan I've tried using the above code on a site section, and I'm not sure where it's going wrong. Prior to using the code above, I used other CSS to get the containers close to similar sizes, but I want to add this as an additional guarantee that the blocks will remain the same sizes responsively.

Site/Section: https://www.brookesilvermanphotography.com/northern-virginia-team#northern-va-team-work

Code: 

@media screen and (min-width:901px) {
div#block-yui_3_17_2_1_1656263204463_17534+.row {display: flex;}
div#block-yui_3_17_2_1_1656263204463_17534+.row .span-12 {background-color: #ffecdd;}
div#block-yui_3_17_2_1_1656263204463_17534+.row> .col {flex: 1;}
}

I have some other styling css for the image and text blocks. Pasting below in case it's interfering.

Other code in this section:

//Northern VA Team Work Background color//
#northern-va-team-work{
  background: #99753b;
  margin-bottom: -22vh;
}

//N VA Team Work Image border//
#block-yui_3_17_2_1_1656257133185_36113 img{
  border: 10px solid #ffecdd;
}
#block-yui_3_17_2_1_1656257133185_36113 
.has-aspect-ratio {
      overflow: visible !important;
  }
#block-yui_3_17_2_1_1656257133185_36113 
.image-block-wrapper {
    overflow: visible !important;}

//Northern va team work image margin right//

#block-yui_3_17_2_1_1656257133185_36113{
  margin-right: 1vh;
  margin-left: 1vh;
  height: auto;
  width: auto !important;
}

//northern va team work text background//

#block-62b876c4ad3f7437f1916c9b{
  background: #ffecdd;
  padding: 40px;
    margin-top: 1.89vh;
  margin-right: 1vh;
  padding-bottom:43px;
  margin-bottom: 8vh;
  margin-left: -1vh;
}

//Nothern VA team work h1//
#block-62b876c4ad3f7437f1916c9b h1{
color: #3f4f3b;
  padding-top: 15px;    
  font-size: 6vh;
  line-height: 5.8vh;
}

//Northern VA p team work//
#block-62b876c4ad3f7437f1916c9b
p{
  line-height: 1.3em !important;
  font-size: .9em;
  margin-top: -5px;
  color: black;
}

//Northern VA H3 team work//
#block-62b876c4ad3f7437f1916c9b
h3{
  margin-top: 4vh;
  font-family:"nexa";
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.5em !important;
  font-size: .9em;
  color: #99753b;
}

//Northern VA Margin bottom spacer//
#block-yui_3_17_2_1_1657232578207_5360{
margin-bottom: -6vh;
}

 

Thanks for any insight!

You mean these boxes?

On 7/9/2022 at 12:21 AM, tuanphan said:

You mean these boxes?

@tuanphan Yes! (Although, I must admit they aren't displaying like this on my end.)