Within a .container-fluid div, the following HTML code is present:
<div class="row mb-2">
<div class="col-md-3">
<a href="<?php echo $host; ?>" title="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="header_logo_to_link">
<img src="<?php echo $host; ?>/images/assets/logo_33.png" alt="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="img-responsive footer_logo_image" />
</a>
</div>
<div class="col-md-6">
<form id="FooterNewsletterForm" method="post">
<h4 class="footer_title">Subscribe to Newsletter</h4>
<div class="row">
<div class="col-6 mb-3">
<input type="text" class="form-control footer_newsletter_input" placeholder="Name" name="NewsletterVname" id="NewsletterVname" />
</div>
<div class="col-6 mb-3 input-group">
<input type="text" class="form-control footer_newsletter_input" placeholder="Email Address" name="NewsletterEmail" id="NewsletterEmail" />
<div class="input-group-append">
<button class="btn btn-default footer_newsletter_button" id="NewsletterButton" name="NewsletterButton" type="submit">Subscribe</button>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="checkbox checkbox_allow_div mb-2 custom-control custom-checkbox">
<input type="checkbox" name="allow" id="nws_accept" value="1" class="allow_checkbox custom-control-input">
<label class="label_300 custom-control-label" id="nws_accept_label" for="nws_accept"><?php echo gdpr_text('gdpr_newsletter_text'); ?></label>
</div>
</form>
</div>
<div class="col-sm-12 col-md-3">
<h4 class="footer_title">Our Social Media Links</h4>
<?php
if($site_config['k_fb'] != "" )
{
echo '<div class="footer_social_divs float-left mr-3">
<a href="'.html($site_config['k_fb']).'" title="Facebook" target="_blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>';
}
if($site_config['k_twitter'] != "" )
{
echo '<div class="footer_social_divs float-left mr-3">
<a href="'.html($site_config['k_twitter']).'" title="Twitter" target="_blank"><i class="fab fa-twitter-square" aria-hidden="true"></i></a>
</div>';
}
if($site_config['k_youtube'] != "" )
{
echo '<div class="footer_social_divs float-left mr-3">
<a href="'.html($site_config['k_youtube']).'" title="Youtube" target="_blank"><i class="fab fa-youtube-square" aria-hidden="true"></i></a>
</div>';
}
if($site_config['k_instagram'] != "" )
{
echo '<div class="footer_social_divs float-left">
<a href="'.html($site_config['k_instagram']).'" title="Instagram" target="_blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>';
}
?>
</div>
<div class="clearfix"></div>
</div>
While the display looks fine on large screens, issues arise on mobile devices where the form within a specific div appears distorted as shown in the uploaded image. Additionally, the input group does not render correctly.
Check out my demo site here.
https://i.sstatic.net/YCHW0.jpg
To resolve this problem on mobile devices, I attempted various adjustments such as using col-sm-12 and col-12 classes, but none of them resolved the issue.