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>Currently, I am using IntroJs and JSON to call the introjs. I am wondering if it is possible to store data/text/info in a database and then retrieve it using JSON? <h2 id="welcomeMsg">Welcome back,<asp:Label ID="lbl_WelcomeName" runat="server" Te ...
I currently have an interactive image-map embedded on my website. Here is the HTML code: <div id="italy-map" class="affiancato verticalmenteAllineato"> <div id="region-map"> <img src="./Immagini/transparent.gif" title="Click on ...
I have successfully implemented a solution to stream fragmented mp4 video to a mobile browser client using the Nancy MVC framework. The code is functioning as expected. However, one scenario I am facing is that the video being streamed is generated simult ...
Currently, I am developing a SaaS platform that will feature customized styles for user accounts. The current method involves using YAML to create unique stylesheets for each account. However, as the number of accounts increases, I am starting to question ...
I'm looking to style an input-group with a form input and submit button using Bootstrap 5. Here's my current code: .card { margin: auto; width: 50%; padding: 10px; opacity: 0.9!important; top: 250px; } <div class="card-header"> ...
Hey there, I'm new to JavaScript and jQuery! I've got this form set up with Bootstrap's disabled class: Note: the 'disabled' class in bootstrap properly disables and enables the button based on conditions. <form action="" met ...
<vs-tr :key="i" v-for="(daydatasT, i) in daydatas"> <vs-td>{{ daydatasT.Machinecd }}</vs-td> <vs-td>{{ daydatasT.Checkdt }}</vs-td> <vs-td>{{ daydatasT.CheckItemnm }}< ...
When I click on the first delete link, I want to display the value from the first input box. Similarly, when I click on the second delete link, I want to show the value from the second input box. Currently, it is always showing the value from the first del ...
Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...
I have set up my layout with a Jumbotron that features a prominent call-to-action button. <a href="#" class="btn btn-lg btn-success">Let's Purchase Something Elegant</a> However, when viewed on an XS mobile screen, the button extends bey ...
I'm currently working on a page layout that consists of a fixed sidebar on the left side and a main container taking up the rest of the page on the right. Inside this right-side container, which is a div, there are 2 elements. <div class="col-sm-1 ...
Hi there! I am using a cropped image as the background for the top of my webpage, with a fixed size defined in pixels for the containing div. The issue arises when I resize the browser window, causing the image to cover most of the page instead of just the ...
Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...
Does anyone know how to achieve the sleek, lightweight buttons and text boxes seen on Google's web pages like Google Search, Google Plus, and Google Play? I am currently using JSP and CSS, but I am open to incorporating jQuery if necessary. Any help w ...
I'm struggling with understanding flexbox and couldn't find any clear explanation on the W3 page about how to remove the extra spacing between containers. For example, in one of their demos, I'm unsure how to achieve a layout similar to lef ...
I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...
I have arranged a data table with multiple rows and columns, and I am seeking guidance on how to increase the width of the "Tel. 1, Tel. 2, and Fecha" columns to ensure that the text appears on a single line. I've attempted adjusting the s width and t ...
I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...
Wishing you a delightful day. As I work on my website, I find myself relying heavily on viewport units like vw and vh for all measurements such as font size, padding, margin, width, and height. These units provide the flexibility needed to ensure that the ...
I'm attempting to showcase one Tweet at a time and have it rotate through different tweets. I'm facing an issue where it works correctly on one type of page, but not on the other. Could this be due to a CSS precedence rule overriding the function ...