css help - trying to reduce padding around code block on mobile

Site URL: https://www.livenourishedandwell.com/connect-nourished-and-well

Hi, I have added custom css for a boxborder around a code injected widget, and it looks good on the computer. However, the widget content is squished within the boxborder on mobile. I think I'd like to minimize the padding, or remove the boxborder altogether on mobile. I have tried messing with the widget code injection and also the boxborder code. Can anyone help? I'm guessing I need to add some kind of @media only CSS somewhere... Site is password protected, so adding pics and code info below. Thank you! 🙏

in custom css I'm using:

.boxBorder {
     border: 2px solid #f3efec;
     padding: 100px;
   }

and here is the code I'm using for the widget:

<div class="boxBorder"><!-- Practice Better Booking Widget: start -->
<style>.better-inline-booking-widget{position:relative}.better-inline-booking-widget iframe{position:absolute;top:0;left:0;width:100%;height:100%}</style>
<div class="better-inline-booking-widget" data-url="https://my.practicebetter.io/" data-form-request="6185dacd3980330f8c522a17" data-hash="5fc925d32a9c240774ac1b3e" data-theme="e3c6ba" style="max-width:800px;height:800px;"></div>
<script type="text/javascript" src="https://my.practicebetter.io/assets/js/booking.widget.js"></script>
<!-- Practice Better Booking Widget: end --></div>

4 hours ago, miraculousmillenial said:

Site URL: https://www.livenourishedandwell.com/connect-nourished-and-well

Hi, I have added custom css for a boxborder around a code injected widget, and it looks good on the computer. However, the widget content is squished within the boxborder on mobile. I think I'd like to minimize the padding, or remove the boxborder altogether on mobile. I have tried messing with the widget code injection and also the boxborder code. Can anyone help? I'm guessing I need to add some kind of @media only CSS somewhere... Site is password protected, so adding pics and code info below. Thank you! 🙏

 

in custom css I'm using:

.boxBorder {
     border: 2px solid #f3efec;
     padding: 100px;
   }

 

and here is the code I'm using for the widget:

<div class="boxBorder"><!-- Practice Better Booking Widget: start -->
<style>.better-inline-booking-widget{position:relative}.better-inline-booking-widget iframe{position:absolute;top:0;left:0;width:100%;height:100%}</style>
<div class="better-inline-booking-widget" data-url="https://my.practicebetter.io/" data-form-request="6185dacd3980330f8c522a17" data-hash="5fc925d32a9c240774ac1b3e" data-theme="e3c6ba" style="max-width:800px;height:800px;"></div>
<script type="text/javascript" src="https://my.practicebetter.io/assets/js/booking.widget.js"></script>
<!-- Practice Better Booking Widget: end --></div>

I've tried Site as protected password but can access your site.

Pls check it again

Hi @bangank36 thank you for your reply! Please use password: jensinopoli

12 hours ago, miraculousmillenial said:

Hi @bangank36 thank you for your reply! Please use password: jensinopoli

Hi @miraculousmillenial,

You can try the following code in Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1636165225474_8990 {
    padding: 0;
  }

  #block-yui_3_17_2_1_1636165225474_8990 .boxBorder {
    padding: 0;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you @bangank36! That was helpful! 🙂🙏

Are you also able to give any suggestions about how to reduce the space between the header menu area and the text box on the page for mobile? (This is not an issue for the home page).

@bangank36 also, I would like the hompage gallery on mobile to have no space between the header menu area (as it does on the computer). Maybe you have a suggestion for this as well? Thank you for your kind assistance!