I'm currently exploring the most effective method to design this concept: https://i.stack.imgur.com/SOQp4.png
The black square symbolizes small icons, accompanied by a heading and paragraph for each specific section. The icons need to align with the heading, while the paragraph should be located directly beneath it.
To achieve a responsive layout with 3 columns, I recommend using absolute positioned icons with a negative margin and float on each column set to a width of 33.33%.
HTML:
<div class="row">
<div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
<div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
<div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
</div>
CSS:
* {box-sizing: border-box;}
.row {overflow: auto;}
.col {width: 33.33%; float: left; padding-left: 100px;}
.col img {position: absolute; width: 80px; margin-left: -100px;}
@media (max-width: 991px) {.col {width: 100%;}}
You can view a live demo here: http://codepen.io/anon/pen/bqBNeL
When it comes to displaying icons, using background images instead of an image tag can be more appropriate as icons are not considered direct content per se.
ul {
list-style: none;
padding: 0;
}
li {
background-repeat: no-repeat;
float: left;
/*Adjust the below lines based on your icon size*/
padding-left: 55px;
width: calc(33% - 55px);
}
h2 {
/*Adjust the below lines based on your icon size and aligning requirements*/
margin-top: 12px;
margin-bottom: 25px;
}
.bill {
background-image: url(http://fillmurray.com/50/50);
}
.city {
background-image: url(http://lorempixel.com/output/city-q-c-50-50-7.jpg);
}
.cat {
background-image: url(http://lorempixel.com/output/cats-q-c-50-50-7.jpg);
}
.food {
background-image: url(http://lorempixel.com/output/food-q-c-50-50-7.jpg);
}
.sports {
background-image: url(http://lorempixel.com/output/sports-q-c-50-50-7.jpg);
}<ul>
<li class="bill">
<h2>Bill Murray</h2>
<p>Some Para</p>
</li>
<li class="city">
<h2>City</h2>
<p>Some Para</p>
</li>
<li class="cat">
<h2>Cat</h2>
<p>Some Para</p>
</li>
<li class="food">
<h2>F00d</h2>
<p>Some Para</p>
</li>
<li class="sports">
<h2>Sports</h2>
<p>Some Para</p>
</li>
<li class="bill">
<h2>Bill Murray</h2>
<p>Some Para</p>
</li>
<li class="cat">
<h2>Cat</h2>
<p>Some Para</p>
</li>
</ul>Can anyone help me with my Chart.js issue? Here is a link to the chart: I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for this in Chart.js? Thanks! ...
Currently, I am working on a test case in Java where I am using Selenium to record a series of events and then play them back on an application. Here is the code snippet I have: // *The app opens a new window* // Get handle of the main window Stri ...
I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...
Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...
Is there a way to create a single source for all data that my elements can utilize but not change (one-way data-binding)? How can I achieve this without using a behavior? I attempted the following in my code: <script type="text/javascript" src="/data. ...
I'm dealing with a table that has only one row containing text with new-line characters, such as: <td id='line-numbers'> <span class="number" id="1">1</span><br> <span class="number" id="2">123</span>< ...
I am facing a similar issue as described in this question and this one I am trying to implement drag-and-drop and resize functionality. It is working fine for static elements, but I encounter issues when adding dynamic divs. The resize property works prop ...
Recently, my team and I have been actively engaged in the process of handling an XML file and dynamically constructing a settings page based on the information extracted from it. Allow me to present an illustration of how these elements are dynamically cre ...
After searching for a way to enable tab selection on click within my HTML fragment representing a tabbed interface, I was unable to find a solution. I resorted to manually programming it using JavaScript, which did work, but I feel there must be a more p ...
Whenever I hover over my icon, the font size increases causing the div to expand slightly and move the page. This doesn't look great. How can I prevent the div from resizing when hovering over the icon? Here's my code: <div className="bg- ...
I've got the xpath for an element: /html/body/div[1]/div/div[2]/div[3]/div/div/div/div[2]/div[1]/div[2]/div[6]/div/div/div/div[1] Inside that div, there's another element: /html/body/div[1]/div/div[2]/div[3]/div/div/div/div[2]/div[1]/div[2]/div[ ...
I need some help understanding why my code is downloading two copies of a locally generated JSON file. Here is the code snippet in question: function downloadJson(data, name) { let dataStr = 'data:text/json;charset=utf-8,' + encodeURICompo ...
Looking for a way to assign different colors to each <li> element in HTML? <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> Here's how you want them displayed: Item 1 should be red Ite ...
http://jsbin.com/EzaKuXE/1/edit I've been attempting to switch the theme from default to cobalt and vice versa, toggling each time the button is clicked. However, I am facing an issue where it only switches to the new theme once and doesn't togg ...
Recently, I incorporated some "raw html" elements with animations into my WordPress site. However, the issue I'm facing is that these animations kick off as soon as the page loads, without waiting for the preloader to complete and display the actual c ...
I am incorporating a modal that corresponds each element of the object newCompanies to a specific row: {newCompanies.map((company, index) => { return ( <div> <div className="side- ...
One feature on my website is a translation script. However, I'm struggling to activate it and update the image and text based on the selected language. This is the code snippet I am currently using: <div class="btn-group"> <button type ...
Currently, I am attempting to create a header that spans the entire viewport regardless of screen size. This header will be split horizontally into 3 equal sections, each occupying one third of the header space. I experimented with setting the header hei ...
Is there a way to make my mobile menu open immediately upon touching the button? I have used ontouchstart="" in both buttons to create an overlay on the content when the offcanvas menu is visible. This functions well as soon as the user touches either butt ...
I've customized a material ui TextField component by increasing the font size of the label. However, I'm facing an issue where the gap in the border for the label remains unchanged despite the larger text size. I couldn't find any solution ...