I'm having an issue with one of the sections on my website not displaying correctly in mobile view. I've checked within WooCommerce and the PHP file, but everything appears to be fine. I attempted to override the section using !important, as well as adding a media query targeting those elements, but unfortunately, it's still not working. This particular section is integrated with WooCommerce, so any advice related to that would be greatly appreciated.
It seems like I may have overlooked something in my scripts.
jQuery('form.variations_form').on( 'show_variation',
function(event, variation){
let output_date='';
let scheduled_date_string = variation.scheduled_date;
console.log(variation.scheduled_date);
let button_text_original = 'Buy Online';
let button_text_preorder = 'Pre-Order Now';
if (!scheduled_date_string) {
output_date= '7 - 10 Business Days';
jQuery(this).find('button.button').html(button_text_original);
}else{
let current_date = new Date();
let scheduled_date_parts = scheduled_date_string.split('/');/*date format must be in d/m/Y */
let scheduled_date_year = parseInt(scheduled_date_parts[2].length<4 ? '20'+scheduled_date_parts[2]:scheduled_date_parts[2]);
let scheduled_date_month = parseInt(scheduled_date_parts[1]) - 1;
let scheduled_date_day = parseInt(scheduled_date_parts[0]);
let scheduled_date = new Date(scheduled_date_year,scheduled_date_month,scheduled_date_day);
console.log(scheduled_date);
if (current_date >= scheduled_date) {
output_date= '7 - 10 Business Days';
jQuery(this).find('button.button').html(button_text_original);
}else{
output_date = scheduled_date_string;
jQuery(this).find('button.button').html(button_text_preorder);
}
}
if (jQuery('.shipping-date-container').length) {
jQuery('.shipping-date-container').html('Estimated to leave our warehouse by: <span class="shipping-date">'+output_date+'</span>');
}else if(jQuery('body.single-product .et_pb_wc_title').length){
jQuery('body.single-product .et_pb_wc_title').after('<div class="shipping-date-container">Estimated to leave our warehouse by: <span class="shipping-date">'+output_date+'</span></div>');
}
}
);/* Estimated Shipping Date */
.shipping-date-container{
font-weight: 500;
color: #1e1919;
font-size: 17px;
line-height: 1.6em;
margin: 10px 0;
}
span.shipping-date{
color: #a13a18;
font-weight: 600;
}
@media screen and (max-width: 980px){
.shipping-date-container span.shipping-date{
display: inline-block;
}
}<div class="shipping-date-container">
Estimated shipping date:
<span class="shipping-date">31/07/2021</span>
</div>