Something went awry when I tried to divide the HTML and CSS code

<div class="col-md-12" style="">
<div class="col-md-4 linkdetail" class="cursor">
    <div class="col-md-12" style="margin-bottom:40px">
        <img src="/img/product3.png" style="display:inline-block;width:100%;">
    </div>
    <div class="col-md-12" style="margin-bottom:15px">
        <img src="/img/100G_ITAEWON 565 Copy.png" style="display:inline-block;">
    </div>
    <div class="col-md-12" style="margin-bottom:30px">
        <img src="/img/$ 24.5 copy.png" style="display:inline-block;">
    </div>
</div>
<div class="col-md-4 linkdetail" class="cursor">
    <div class="col-md-12" style="margin-bottom:40px">
        <img src="/img/product3.png" style="display:inline-block;width:100%;">
    </div>
    <div class="col-md-12" style="margin-bottom:15px">
        <img src="/img/100G_ITAEWON 565 Copy.png" style="display:inline-block;">
    </div>
    <div class="col-md-12" style="margin-bottom:30px">
        <img src="/img/$ 24.5 copy.png" style="display:inline-block;">
    </div>
</div>
<div class="col-md-4 linkdetail" class="cursor">
    <div class="col-md-12" style="margin-bottom:40px">
        <img src="/img/product3.png" style="display:inline-block;width:100%;">
    </div>
    <div class="col-md-12" style="margin-bottom:15px">
        <img src="/img/100G_ITAEWON 565 Copy.png" style="display:inline-block;">
    </div>
    <div class="col-md-12" style="margin-bottom:30px">
        <img src="/img/$ 24.5 copy.png" style="display:inline-block;">
    </div>
</div>
</div>

The above code represents HTML and CSS inline source code that has been modified to separate them. However, both the HTML and CSS may not be optimized effectively. How can we improve this source code?

What issues are present in this code snippet?

.cursor             { cursor:pointer; }
.first-gap          { margin-bottom:38px; }
.second-gap         { margin-bottom:36px; }
.third-gap          { margin-bottom:38px; }
.word-word-gap      { margin-bottom:15px; }
.gap                { margin-bottom:95px; }
.reactive           { display:inline-block;width:100%; }
#section>.first-one { min-height:592px; }
<div class="col-md-12" class="first-one">
<div class="col-md-6 linkdetail" class="cursor">
    <div class="col-md-12 first-gap reactive&quot;>
        <img src=&"/img/product1.png&;quot;>
    </div>
    <div class="col-md-12 word-word-gap&quot;>
        100G_ITAEWON 565
    </div>
    <div class="col-md-12 gap">picture$ 24.5

htmlcss

Answer №1

It appears that you are utilizing bootstrap in your project. To enhance its functionality, I suggest importing the CDN for it. For further details on bootstrap CDNs, you can visit this informative site: Bootstrap CDN

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

Hyperlinks functioning properly in Mozilla Firefox, yet failing to work in Internet Explorer

I'm encountering issues with my links not functioning properly in Internet Explorer. <a style="text-decoration:none;" href="<?php echo base_url();?>index.php/person/create/<?php echo $this->uri->segment(4);?>" > When I check ...

htmlcodeigniterinternet-explorer

Astro component experiencing script tag malfunction within content collection

I'm trying to create something using a script tag, but for some reason the script doesn't seem to be working properly. Below is my content collection: --- title: Essay Similarity stakeholder: THESIS articleDate: 05 Feb 2023 projectStart: 2022-08 ...

htmltypescriptastrojs

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

Is it possible to change the order of elements in the navbar using HTML/Bootstrap depending on the state of the responsive menu toggle?

I am attempting to implement a responsive Bootstrap 4 navbar within Angular 8. When the menu is closed, the element order is correct: COMPANY, BROWSE, LOGIN The issue arises when I open the menu and the #menu receives the navbar-collapse flex attributes: ...

htmlcssangularbootstrap-4

How to turn off pinch to zoom feature in Mozilla Firefox on a Microsoft tablet or touch screen display

My goal is to enable zooming and panning for an SVG across all devices and browsers. I've successfully implemented this using panzoom.js. However, I'm encountering an issue specifically with Mozilla Firefox on tablet devices and Windows touch sc ...

javascriptjqueryhtmlcssmozilla

Designing visual representations using the Canvas elementorGenerating graphic content

I want to design a creative text image where multiple characters come together to form a word, like "The Matrix", within an animated canvas with a matrix effect. The challenge I'm facing is figuring out how to display the text inside the canvas and th ...

javascripthtmlcsswebcanvas

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically. <div class="row"> <div class="span12 paginatio ...

htmlcsstwitter-bootstrapcheckboxvertical-alignment

Slider in MaterialUI featuring a vibrant spectrum of colors

Currently, I am delving into MaterialUI and my focus is on creating a range slider. I came across this example that I found useful: https://material-ui.com/components/slider/#range-sliders My goal is to assign different colors to the "high," "medium," and ...

cssmaterial-ui

Center the cropped image within a div container

Is there a way to set a maximum height for a div containing an image and hide the parts of the image that exceed this height, while keeping it centered vertically inside the div? For example, if the browser width is 1200px and the image aspect ratio is 4:3 ...

cssimagehtmlcentercrop

Problem with incorporating responsive gifs

I'm new to CSS and I'm trying to incorporate an animated GIF as a smartphone screen using Bootstrap to ensure responsiveness. I've managed to get it working for larger and medium screens, but the issue arises when resizing for smaller displa ...

htmlcssresponsive-designbootstrap-4

Are numerous h1 tags allowed?

Many debates have arisen regarding the use of multiple h1 tags on a single web page. What if additional semantic meaning is provided using hgroup, article, header, footer, and section tags? Despite numerous discussions, a definitive answer remains elusiv ...

htmlsemantic-markupweb-frontend

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

I am currently working on a table and my goal is to display rows in an orderly manner based on the sum of their columns. Essentially, I want the rows with the highest values to be displayed first, followed by rows with second highest values, and so on. Des ...

javascripthtml

Generate an adjustable grid layout (with rows and columns) to display information retrieved from an API request

I have recently started learning React JS and JavaScript. To practice, I am working on a small project where I am facing an issue with creating dynamic rows and columns. My aim is to display data in 4 columns initially and then move to a new row and column ...

javascripthtmlcssreactjsbootstrap-4

Tips for adjusting the color of a pin without altering anything else

I have a Google Marker with a default design. By default, I can create the pin with letters inside it. However, I want to change the color of this pin. So, I attempted to use this icon: Unfortunately, the letters shifted and the size slightly changed. ...

javascripthtmlcssgoogle-maps

The Firefox form is experiencing issues when the cursor is set to 'move'

I have an HTML form with a specific code snippet: #stoppage_section .stoppage{ cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } <div id="st ...

javascriptjqueryhtmlcss

Ensuring that your content expands to fit the sidebar dimensions

I have diligently searched for a solution to my issue both on Google and here, but have yet to find one that works. I've experimented with various CSS properties like display: table-cell and inline-block, as well as different overflow options, but not ...

css

Three-column layout using CSS fluid design

The arrangement in Column B below does not look right. I successfully created a 3-column layout with the help of this resource. However, it assumes that fixed columns A and B have the same height or start at the same vertical position. In my case, B has an ...

csshtml

Initiate a webpage reload

Currently, I am developing an android application specifically designed for tablet devices. This application will display a simple HTML page with text that will be shown for extended periods of time, sometimes up to several hours. The content on this page ...

htmltriggersasp-classicrefresh

I am experiencing difficulty with playing my embed file on Chrome as the request for the audio file is consistently being "canceled."

I implemented a feature on my webpage that uses jQuery to play a sound whenever users make an error. Here is a snippet of the HTML code: <embed id="beepCache" src="sound/beep.wav" autostart="false" type ="audio/x-wav" width="0" height="0" hidden="hidd ...

jqueryhtmlgoogle-chrome

Left align the CSS menu text next to the menu image

Currently, I have a basic CSS menu that includes background images aligned to the left. My goal is to have the text float to the left of each image as well. <div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "vie ...

htmlcssmenucss-floatmenubar