Looking for assistance with HTML/CSS code

Adding the code snippet below into my Shopify product-liquid file caused chaos on the page, altering the font and even changing the shape of the add to cart button...

The problematic code is shown below:

<div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">
<div class="container">
  <div class="icon-box">
    <div class="item " style="width: 33.333333333333336%">
      <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image3.png?v=1576699921">
      <label>Satisfait ou Remboursé </label>
    </div>    
    <div class="item " style="width: 33.333333333333336%">
      <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image1.png?v=1576699921">
      <label>Meilleur prix</label>
    </div>    
    <div class="item " style="width: 33.333333333333336%">
      <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image2.png?v=1576699921">
      <label>Paiement 100% sécurisé</label>
      
      <div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">

<link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/colors.scss.css?1306" rel="stylesheet"  type="text/css" />

<link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/custom.scss.css?1306" rel="stylesheet"  type="text/css"  />
      
    </div>
    
  </div>

You can view a demo here. (Click 'run' to see it in action)

htmlcssshopify

Answer №1

Don't forget to close your </div> HTML tags. Imagine HTML like a stack - every opening tag needs its corresponding closing tag (in this instance, you have more <div> tags than </div> tags). There are specific instances where closing tags are not necessary (such as with the <img> and <link> tags in your current code).

Answer №2

You forgot to close 3 div tags (</div>) at the end. This mistake could result in shopify styles being applied to content outside of the intended area. Simply add the 3 closing div tags and everything should display correctly.

I've left a comment with the corrected code below:

 <div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">
    <div class="container">
        <div class="icon-box">
            <div class="item " style="width: 33.333333333333336%">
                <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image3.png?v=1576699921">
                    <label>Satisfait ou Remboursé </label>
            </div>
            <div class="item " style="width: 33.333333333333336%">
                <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image1.png?v=1576699921">
                    <label>Meilleur prix</label>
            </div>
            <div class="item " style="width: 33.333333333333336%">
                <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image2.png?v=1576699921">
                <label>Paiement 100% sécurisé</label>
                <div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">
                    <link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/colors.scss.css?1306" rel="stylesheet"  type="text/css" />
                    <link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/custom.scss.css?1306" rel="stylesheet"  type="text/css"  />
                </div>
            </div>
    <!-- Don't forget to add the missing closing div tags below -->
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps do I need to take in order to integrate an mpg video onto my

I am in need of embedding mpg (dvd compliant mpeg2) movie files onto my webpage. Unfortunately, I do not have the ability to convert these videos into any other format. This webpage is solely for personal use, so any solution would be greatly appreciated. ...

phpjavascripthtmlmpeg

How can you utilize CSS grid to position an alternate symbol alongside ordinary text?

Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...

htmlcsscss-gridcentering

What is the best way to ensure that only one of two textboxes is filled out in an HTML form?

Looking to create 2 fields that are mutually exclusive. One will be a FileField and the other a TextBoxField. Is there an HTML form template available for this specific scenario? I've scoured the web but haven't come across one yet. Apologies ...

htmldjango

Issue with JS jQuery: The click event on an li element within an expanded ul does not function properly

I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...

javascriptjqueryhtmlhtml-lists

Real-time data feeds straight from JSON

Currently, I have a JSON file that is generated dynamically and it contains match information along with a unique id. This JSON data is categorized into live, upcoming, and recent arrays. Being new to Javascript, I am unsure about the best approach to crea ...

javascriptjqueryhtmljson

What is the best way to create a blurred effect on an image during loading, and then transition to a sharp image once it is fully loaded?

I'm currently working on a project where I want the images to display as a blurred preview initially, and then become clear once fully loaded. This is similar to the feature seen on Instagram, where the app shows a blurred image before displaying the ...

javascripthtmljquerycss

Tips for determining if an HTMLElement has already been created

One issue I'm facing is with a third party component that emits an "onCellEdit" event and passes a cell element as a parameter. My goal is to automatically select the entire text in the input element generated inside this cell when the event occurs. ...

javascripthtmlangulartypescriptdom

A guide to using the up and down keys to switch focus between div elements in a react component with TypeScript and CSS

I am currently working with a scenario where data is being displayed within different div elements, and I wish to enable the selection/focus of a specific div when users use the up/down arrow keys. While trying to achieve this functionality by using refs ...

htmlcssreactjstypescriptmaterial-ui

Update the contents of a div element with JavaScript and PHP combo

When I click on the following div, I want to replace it with a similar one from file.php. The div tag in question is: <div style="display: none;" id="extra" class="container2" xml:id="page"> <div class="title"> <h2>Stuff to check out< ...

javascriptphpjqueryhtml

What steps do I need to take in order to load the static folder from a CSS file?

Is there a way to load the static folder from a CSS file? I attempted to import using URL(), however, it was unsuccessful. I am looking to utilize the static path in order to apply a background to an element. .input_card:checked+.check-box { backgroun ...

pythoncssdjango

Display a page with sections that have opacity applied, identified by the hashtag #section, and utilize JavaScript to automatically scroll to the top of

Check out my app at . I'm working on overriding the scroll bar behavior in CSS to keep the entire app visible, including the logo, header, and controls, as users navigate through different sections. However, I seem to be having trouble with the CSS as ...

javascriptcss

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

javascriptcssnext.jshoverjsx

The Facebook like button seems to be missing from the webpage

Hi everyone, I'm having trouble getting the like button code to work. I used the wizard on Facebook but the button still isn't showing up, even with a simple HTML setup like this: <!DOCTYPE html> <html> <head> </head> < ...

htmlcssfacebook

Tips for incorporating a local image using file:// in JavaFX WebKit

I am facing an issue with displaying a picture in a JavaFX webview using local HTML. Despite writing the code, I am unable to show the image. The URL of the image is "file:/D:/a.jpg". //Main WebViewBrowser.java public class WebViewBrowser extends Appli ...

javahtmljavafxwebkit

Next.js Image staying at the forefront

Currently, I am utilizing Tailwind CSS to style my Next.js website and incorporating the Next.js Image element for an image on the page. My goal is to display a modal over the existing page without completely blacking out the background; instead, I want i ...

htmlnext.jsjsxtailwind-cssnextjs-image

Ignore the initial children of the highest level divs exclusively

Is there a way to apply a style to all top-level divs within a div, excluding the first one? I have tried using not(:first-child) but it seems to be recursive. How can this be achieved? <div class='want-to-skip-first-a'> <div class= ...

htmlcss

Rotating SVG graphics with a growth effect

Check out my CSS below: /* -------------------------- Base --------------------------- */ body { padding-top: 60px; background: #0f4e7a; } svg { margin: auto; display: block; width: 28%; } .star{ fill: #FFF; } /* ------------------ ...

csssvg

Can the labelDisplayedRows be disabled in the table pagination actions of Material UI?

I am currently working on customizing the table pagination actions in Material UI's table and I need to remove the labelDisplayedRows function. My goal is to only show next/previous icons in the footer without the counter (e.g., 1 of 5). I managed t ...

cssmaterial-uimaterial-table

Adjust the vertical positioning according to the percentage of the width

Currently, I am attempting to modify the position of my navigation bar on the screen in relation to the screen width rather than the height. I previously attempted using top: 10% in CSS, but realized this is based on the screen's height instead of its ...

htmlcss

Creating a custom variable assignment in Bootstrap within the custom.scss file

I've been searching for a solution to this problem for half a day now. My goal is to change the value of the $primary variable from the default $blue to the $orange variable. I tried following the instructions in the documentation: $primary: red; @imp ...

csssassbootstrap-5