Adjusting the product page HTML for mobile devices

Adjusting the product page HTML for mobile devices

yanroffe
Visitor
1 0 0

Captura de tela de 2024-01-30 16-39-47.pngCaptura de tela de 2024-01-30 16-39-40.pngCaptura de tela de 2024-01-30 16-43-58.pngCaptura de tela de 2024-01-30 16-43-54.png

Hello good afternoon!
Sorry if this may seem like a silly question, but I've already tried making all the adjustments and I can't get the desired result.

I would like text to be centered next to images on desktop devices

The other problem is that for mobile versions, the images have a very large space between them and if I simply remove the space, the titles and paragraphs also do not have the correct layout.

 

 

 

<div style="text-align: center;"><span style="text-decoration: underline;"><strong><span style="color: #404040; text-decoration: underline;">PRODUCT DESCRIPTION</span></strong></span></div>
<div style="text-align: center;"><span style="text-decoration: underline;"><strong><span style="color: #404040; text-decoration: underline;"></span></strong></span></div>
<div style="text-align: center;"><span style="text-decoration: underline;"><strong><span style="color: #404040; text-decoration: underline;"></span></strong></span></div>
<div style="text-align: center;"><strong><span style="color: #404040;"></span></strong></div>
<h2 style="text-align: center;">
<strong><span style="color: #404040;">Awaken Your Natural Beauty: </span></strong><strong><span style="color: #404040;">Explore On The Go Blush! </span></strong>
</h2>
<p> </p>
<div style="text-align: center;"><strong><span style="color: #404040;"></span></strong></div>
<div style="text-align: center;"><strong><span style="color: #404040;"></span></strong></div>
<div style="text-align: center;"><span style="color: #404040;"><strong data-mce-fragment="1"></strong></span></div>
<span style="color: #404040;"><strong data-mce-fragment="1"></strong></span>
<h3 style="text-align: center;">
<strong>Ladies, it’s time to revolutionize your beauty routine!</strong><span> </span>Unleash your natural glow with our ‘Blush On The Go’. This isn’t just a blush, it’s a skincare powerhouse packed with Ginseng, Aloe Vera, and a unique Fruit mix. Imagine a blush that not only enhances your beauty but also hydrates and cares for your skin. <strong>Yes, we’ve made it possible!</strong>
</h3>
<p style="text-align: center;"><span style="font-size: 0.875rem;"> </span></p>
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"><iframe width="1198" height="674" src="https://www.youtube.com/embed/Xgh47h_BdHQ?controls=0&amp;rel=0" title="Blush On The Go - Como usar" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>
<h2 style="text-align: center;"><span style="color: #404040;"></span></h2>
<h2 style="text-align: center;"><span style="color: #404040;"></span></h2>
<h2 style="text-align: center;"><span style="color: #404040;"></span></h2>
<h2></h2>
<h2 style="text-align: center;"></h2>
<h2 style="text-align: center;"></h2>
<h2 style="text-align: center;"></h2>
<h2 style="text-align: center;"></h2>
<p style="text-align: center;"> </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"> <span style="color: #404040;"> </span> </p>
<div style="text-align: center; flex: 1;"><img src="https://cdn.shopify.com/s/files/1/0589/3527/9689/files/CORAL_480x480.png?v=1701206113" style="margin-top: 30px; margin-right: 80px; margin-bottom: 16px; float: left;"></div>
<p><span style="color: #404040;"> </span></p>
<h3 style="text-align: center;"><strong></strong></h3>
<h3 style="text-align: center;"><strong></strong></h3>
<h3 style="text-align: center;"><strong></strong></h3>
<h3 style="text-align: center;"><strong></strong></h3>
<h3 style="text-align: center;"><strong></strong></h3>
<h2 style="text-align: center;"><strong></strong></h2>
<h2 style="text-align: center;"><strong></strong></h2>
<h2 style="text-align: center;"><strong></strong></h2>
<h2 style="text-align: center;"><strong></strong></h2>
<h2 style="text-align: center;"><strong></strong></h2>
<h2 style="text-align: center; flex: 1;"><strong></strong></h2>
<h2 style="text-align: center; flex: 1;"><strong></strong></h2>
<h2 style="text-align: center; flex: 1;"><strong></strong></h2>
<h2 style="flex: 1 1 0%; text-align: left;"><strong>Ladies of Elegance, Take Note! </strong></h2>
<h3 style="flex: 1 1 0%; text-align: left;">Revolutionize your beauty routine with our "On The Go Blush" from Bougie Beauty, the only stick format for easy application on any occasion. More than just a blush, it's a powerful ally to reveal your natural glow.</h3>
<p> </p>
<p> <a href="https://bougiebeauty.uk/products/blush-on-the-glow?variant=40694512287817"><img src="https://cdn.shopify.com/s/files/1/0589/3527/9689/files/Semnome_1350x250px_1_240x240.png?v=1706627798" alt="" style="display: block; margin-left: auto; margin-right: auto;" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0589/3527/9689/files/Semnome_1350x250px_1_240x240.png?v=1706627798"></a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>  </p>
<div style="text-align: right;">
<h2 style="text-align: right;" data-mce-fragment="1" data-mce-style="text-align: right;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<img style="margin-top: 100px; margin-bottom: 100px; margin-left: 80px; float: right;" src="https://cdn.shopify.com/s/files/1/0589/3527/9689/files/Designsemnome_1_480x480.png?v=1701205395">
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
</div>
<p><span style="color: #404040;"> </span></p>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;"><strong data-mce-fragment="1"><span data-mce-fragment="1"></span></strong></h2>
<h2 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;">
<strong data-mce-fragment="1"><span data-mce-fragment="1">Bid Farewell to the Agony of Ordinary Makeup: Genuine Care for Your Skin with On The Go Blush!</span></strong><br>
</h2>
<h3 style="text-align: left;" data-mce-fragment="1" data-mce-style="text-align: left;">Have you ever felt the frustration of realizing that conventional makeup not only fails to enhance your natural beauty but may harm your skin? With Bougie Beauty's On The Go Blush stick, we offer more than a touch of color. We care for your skin with natural ingredients, providing a makeup and skincare experience, turning pain into pleasure. Discover the difference - your face deserves more than just makeup; it deserves to be pampered and nurtured. </h3>
<p>  </p>
<p> </p>
<div style="text-align: left;"><a href="https://bougiebeauty.uk/products/blush-on-the-glow?variant=40694512287817"><img style="margin-bottom: 50px; float: none; display: block; margin-left: auto; margin-right: auto;" alt="" src="https://cdn.shopify.com/s/files/1/0589/3527/9689/files/Semnome_1350x250px_2_240x240.png?v=1706629199"></a></div>
<a href="https://bougiebeauty.uk/products/blush-on-the-glow?variant=40694512287817"> </a>
<p> </p>
<p> </p>
<h2><span style="color: #404040;"></span></h2>
<h2 style="text-align: center;"><strong><span style="color: #404040;"> </span></strong></h2>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;">
<img style="margin-top: 80px; margin-right: 80px; margin-bottom: 16px; float: left;" src="https://cdn.shopify.com/s/files/1/0589/3527/9689/files/CORAL_1_480x480.png?v=1701206464" width="471" height="471"> </div>
<h3 style="text-align: center;"><span style="color: #404040;"><strong></strong></span></h3>
<div class="main" id="cib-chat-main">
<div class="message">
<div tabindex="0" class="content" aria-description="">
<div class="ac-container ac-adaptiveCard"></div>
</div>
</div>
<div class="content footer has-bot-actions">
<h2 style="text-align: center;" class="text"></h2>
<h2 style="text-align: center;" class="text"></h2>
<h2 style="text-align: center;" class="text"></h2>
<h2 style="text-align: center;" class="text"> <strong> </strong><strong style="text-align: left; font-size: 0.875rem;"> </strong><strong style="text-align: left; font-size: 0.875rem;"> </strong>
</h2>
<h2 style="text-align: left;" class="text">
<strong>High-Quality Formula, Natural Ingredients, and a Unique Makeup and Skincare Experience</strong><br>
</h2>
<h3 style="text-align: left;">Imagine an explosion of freshness and color, enriched with revitalizing ginseng, soothing aloe vera, and a unique blend of fruits, all available in the convenient stick format. This blush not only accentuates your beauty but also hydrates and cares for your skin. A complete skincare and makeup experience!<strong><br></strong>
</h3>
<p> </p>
<p><a href="https://bougiebeauty.uk/products/blush-on-the-glow?variant=40694512287817"><img alt="" src="https://cdn.shopify.com/s/files/1/0589/3527/9689/files/Semnome_1350x250px_3_240x240.png?v=1706629385" style="display: block; margin-left: auto; margin-right: auto;"></a></p>
</div>
</div>

 

 

 

 

Replies 0 (0)