JHillArtDesign Posted April 29, 2022 Share Posted April 29, 2022 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! Link to comment
Solution tuanphan Posted May 1, 2022 Solution Share Posted May 1, 2022 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;} } JHillArtDesign 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JHillArtDesign Posted May 2, 2022 Author Share Posted May 2, 2022 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! Link to comment
tuanphan Posted May 5, 2022 Share Posted May 5, 2022 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;} } JHillArtDesign 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JHillArtDesign Posted May 6, 2022 Author Share Posted May 6, 2022 @TUANPHAN THANK YOU!! Link to comment
jessmileur Posted July 8, 2022 Share Posted July 8, 2022 (edited) @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! Edited July 8, 2022 by jessmileur Formatting Link to comment
tuanphan Posted July 9, 2022 Share Posted July 9, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jessmileur Posted July 11, 2022 Share Posted July 11, 2022 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.) Screen Recording 2022-07-11 at 12.46.26 PM.mov Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment