.responsive-table{width:100%;border-collapse:collapse}.responsive-table th,.responsive-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top}.responsive-table th{background-color:#f4f4f4}@media (max-width:768px){.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table tr{margin-bottom:15px;border:1px solid #ddd;border-radius:8px;padding:10px}.responsive-table td{text-align:right;padding-left:50%;position:relative}.responsive-table td::before{content:attr(data-label);position:absolute;left:15px;width:45%;font-weight:bold;text-align:left}}Package
What’s Included
Price
Standard Clean
Dusting,vacuum/mop,bathrooms,kitchen surfaces,general tidying
1 Bed/1 Bath → $125
2 Bed/2 Bath → $175
3 Bed/2 Bath → $225
4 Bed/3 Bath → $300+Deep Clean
Standard+baseboards,door frames,cabinets,heavy scrubbing
1 Bed/1 Bath → $200
2 Bed/2 Bath → $275
3 Bed/2 Bath → $350
4 Bed/3 Bath → $450+✅ On desktop,it shows as a regular table.
✅ On mobile,each row becomes a card with labels on the left and values on the right.
Do you want me to also style it to match a luxury/cleaning business theme (navy+gold,like your branding)?
You said:I would for each column to stack in mobile
ChatGPT said:Got it 👍 — if you want each column to stack vertically in mobile,instead of side-by-side labels,we can restructure the CSS so that on small screens,each simply becomes a full-width block stacked under the previous one. That way,the Package → What’s Included → Price flow is preserved in order.
Here’s the updated code:html
Copy code
.responsive-table{width:100%;border-collapse:collapse}.responsive-table th,.responsive-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top}.responsive-table th{background-color:#f4f4f4}@media (max-width:768px){.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table tr{margin-bottom:20px;border:1px solid #ddd;border-radius:8px;overflow:hidden}.responsive-table td{border:none;border-bottom:1px solid #eee;padding:10px 15px}.responsive-table td:last-child{border-bottom:none}.responsive-table td::before{display:none}}.et_pb_section_0{overflow-x:hidden;overflow-y:hidden}.et_pb_section_0.et_pb_section{padding-bottom:0px;background-color:#d9e0e2!important}.et_pb_row_0.et_pb_row{padding-bottom:30px!important;padding-bottom:30px}.et_pb_text_0{line-height:2em;font-size:18px;line-height:2em}.et_pb_text_0 h1{font-family:'Unna',Georgia,"Times New Roman",serif;font-size:96px}.et_pb_row_1.et_pb_row{padding-bottom:0px!important;padding-bottom:0px}.et_pb_image_0 .et_pb_image_wrap img,.et_pb_image_1 .et_pb_image_wrap img{max-height:none}.et_pb_image_0{margin-left:-5vw!important;text-align:left;margin-left:0}.et_pb_text_1{line-height:2em;font-size:18px;line-height:2em;padding-bottom:25px!important}.et_pb_image_1{margin-top:-250px!important;margin-right:-15vw!important;text-align:left;margin-left:0}.et_pb_section_1.et_pb_section{padding-top:0px;padding-bottom:0px}.et_pb_row_2.et_pb_row{padding-top:0px!important;padding-top:0px}.et_pb_text_2,.et_pb_text_3,.et_pb_text_4,.et_pb_text_5{line-height:2em;font-size:15px;line-height:2em}.et_pb_text_2 h2,.et_pb_text_5 h2,.et_pb_text_7 h2{font-family:'Unna',Georgia,"Times New Roman",serif;font-size:72px}.et_pb_text_3 h4,.et_pb_text_4 h4{font-family:'Unna',Georgia,"Times New Roman",serif;font-weight:700;font-size:24px;line-height:1.2em}.et_pb_text_3:hover,.et_pb_text_4:hover{background-image:initial;background-color:transparent}.et_pb_button_0_wrapper .et_pb_button_0,.et_pb_button_0_wrapper .et_pb_button_0:hover{padding-top:15px!important;padding-right:40px!important;padding-bottom:15px!important;padding-left:40px!important}.et_pb_button_0,.et_pb_button_0:after{transition:all 300ms ease 0ms}.et_pb_image_2{margin-right:-10vw!important;text-align:left;margin-left:0}.et_pb_accordion_0 .et_pb_toggle_title:before{font-family:ETmodules!important;font-weight:400!important;content:"\22"!important}.et_pb_section_3.et_pb_section{padding-left:10vw}.et_pb_section_4.et_pb_section{padding-left:10vw;background-color:#d9e0e2!important}.et_pb_text_7{line-height:1.8em;font-size:18px;line-height:1.8em;max-width:750px}.et_pb_contact_form_0.et_pb_contact_form_container .input,.et_pb_contact_form_0.et_pb_contact_form_container .input::placeholder,.et_pb_contact_form_0.et_pb_contact_form_container .input[type=checkbox]+label,.et_pb_contact_form_0.et_pb_contact_form_container .input[type=radio]+label{font-size:16px;line-height:1.8em}.et_pb_contact_form_0.et_pb_contact_form_container .input::-webkit-input-placeholder{font-size:16px;line-height:1.8em}.et_pb_contact_form_0.et_pb_contact_form_container .input::-moz-placeholder{font-size:16px;line-height:1.8em}.et_pb_contact_form_0.et_pb_contact_form_container .input:-ms-input-placeholder{font-size:16px;line-height:1.8em}.et_pb_contact_form_0{max-width:700px}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button{color:#ffffff!important;border-color:rgba(0,0,0,0);border-radius:0px;letter-spacing:4px;font-size:14px;font-weight:700!important;text-transform:uppercase!important;padding-top:15px!important;padding-right:40px!important;padding-bottom:15px!important;padding-left:40px!important;margin-top:10px!important}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:hover:after{margin-left:.3em;left:auto;margin-left:.3em;opacity:1}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:after{line-height:inherit;font-size:inherit!important;margin-left:-1em;left:auto;font-family:ETmodules!important;font-weight:400!important}.et_pb_contact_form_0 .input,.et_pb_contact_form_0 .input[type="checkbox"]+label i,.et_pb_contact_form_0 .input[type="radio"]+label i{background-color:#ffffff}.et_pb_column_5{padding-top:80px;padding-bottom:80px}.et_pb_text_7.et_pb_module,.et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module{margin-left:auto!important;margin-right:auto!important}@media only screen and (min-width:981px){.et_pb_section_3,.et_pb_section_4{max-width:90%}}@media only screen and (max-width:980px){.et_pb_text_0,.et_pb_text_1,.et_pb_text_7{font-size:16px}.et_pb_text_0 h1{font-size:60px}.et_pb_image_0 .et_pb_image_wrap img,.et_pb_image_1 .et_pb_image_wrap img{max-height:300px;width:auto}.et_pb_image_0{margin-left:0vw!important}.et_pb_image_1{margin-top:0px!important;margin-right:0vw!important}.et_pb_section_1.et_pb_section{padding-top:40px}.et_pb_text_2 h2,.et_pb_text_5 h2,.et_pb_text_7 h2{font-size:48px}.et_pb_text_3 h4,.et_pb_text_4 h4{font-size:20px}.et_pb_image_2{margin-right:0vw!important}.et_pb_image_2 .et_pb_image_wrap img{width:auto}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:after{line-height:inherit;font-size:inherit!important;margin-left:-1em;left:auto;display:inline-block;opacity:0;content:attr(data-icon);font-family:ETmodules!important;font-weight:400!important}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:before{display:none}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:hover:after{margin-left:.3em;left:auto;margin-left:.3em;opacity:1}.et_pb_column_5{padding-top:0px;padding-bottom:0px}}@media only screen and (max-width:767px){.et_pb_text_0,.et_pb_text_1,.et_pb_text_7{font-size:15px}.et_pb_text_0 h1{font-size:42px}.et_pb_image_0 .et_pb_image_wrap img,.et_pb_image_1 .et_pb_image_wrap img{max-height:none;width:auto}.et_pb_text_2 h2,.et_pb_text_5 h2,.et_pb_text_7 h2{font-size:32px}.et_pb_text_3 h4,.et_pb_text_4 h4{font-size:18px}.et_pb_image_2 .et_pb_image_wrap img{width:auto}.et_pb_section_3.et_pb_section,.et_pb_section_4.et_pb_section{padding-left:0vw}.et_pb_section_3,.et_pb_section_4{max-width:100%}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:after{line-height:inherit;font-size:inherit!important;margin-left:-1em;left:auto;display:inline-block;opacity:0;content:attr(data-icon);font-family:ETmodules!important;font-weight:400!important}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:before{display:none}body #page-container .et_pb_section .et_pb_contact_form_0.et_pb_contact_form_container.et_pb_module .et_pb_button:hover:after{margin-left:.3em;left:auto;margin-left:.3em;opacity:1}}