What is preventing the adjacent DIVs from aligning on the same row as this DIV?

In the code snippet below, I've introduced another div.website-thumbnail. However, the div containing 

<span class="website-title">Business Coach</span>
appears isolated on its own line, almost as if it has clear: left; applied to it. None of the other div.website-thumbnails align on the same line as the one with 
<span class="website-title">Business Coach</span>
.

        .website-thumbnail {width: calc(25% - 10px); float: left; margin: 5px;}
        .website-thumbnail img {max-width: 100%;}
        .website-title {display: inline-block; text-align: center; width: 100%; background-color: #ec0c8d; color: white; padding: 5px 0;}
        @media (max-width: 900px) {
            .website-thumbnail {width: calc(33% - 10px);}
        }
        @media (max-width: 700px) {
            .website-thumbnail {width: calc(50% - 10px);}
        }
    <div class="website-thumbnail"><span class="website-title">Accountant</span><a href="/accountant/" target="_blank" rel="noopener noreferrer"><img title="Accountant Website Design" src="https://websites.insightdesign.com.au/wp-content/uploads/2019/03/websites-insightdesign-accountant.jpg" /></a></div>
    ... more website thumbnails...

To observe the issue in a desktop viewport, you'll need to click "Expand snippet," where the problem originates.

Your assistance would be highly appreciated.

You can witness the live effect at the specified link, on the 4th row of screenshots displayed on a desktop screen.

css

Answer №1

To address the problem, I included the code snippet below:

.website-thumbnail {
 position: relative;
 display: inline-block;
 width: 24%;
 /* float: left; */
 vertical-align: top;
 margin: auto;
}

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

Div element is not being styled by the second CSS class

I'm facing an issue while trying to split my html code into separate php files. I can't seem to figure out the error in my index.php file. Here is a snippet from the file: .topheader { background-color: #404040; color: white; padding: 16 ...

htmlcss

Bizarrely rapid transitions from standard to hovering appearance in CSS

After creating a custom styled button with a hover effect, I noticed an issue where if you happen to hover over a specific spot on the button, it quickly switches between its normal and hover states. https://i.sstatic.net/uPq1F.gif This is my code: but ...

htmlcss

What steps can be taken to eliminate the 1-pixel line between the background and gradient?

https://i.sstatic.net/nbtkK.png How can I remove the line that appears between the block and the gradient background when zooming in, especially noticeable in Safari (After zooming a couple times, Cmd +) For more details, please refer to this jsfiddle li ...

cssbackgroundlinear-gradients

CSS menu cascading dilemma due to overflow problem

My CSS-based drop down menu works perfectly, but now I want to add a sub-menu that is also visible. However, I am encountering an issue where the height of the main menu list expands when the sub menu is displayed. http://jsfiddle.net/GzfFs/ .cascade_con ...

csspositionoverflow

Struggling to style a nested table using CSS

Please take a look at this JSFiddle example for reference. I am currently working with tablesort and its associated CSS to achieve alternating row colors for the rows containing first and last names. Additionally, I want the rows within the sub-table disp ...

javascriptjqueryhtmlcss

The functionality of jQuery click events seems to be disabled on the webpage, however, it is working perfectly fine on jsFiddle

After thoroughly checking the js tags and ensuring everything is properly closed, it's frustrating when the JavaScript suddenly stops working. The code functions perfectly in JSFiddle, leading me to believe that the issue may lie with something I&apos ...

javascriptjqueryhtmlcss

Create an animated effect using JavaScript to toggle the classList

As I delved into the world of CSS and HTML, I stumbled upon an interesting tutorial for creating a responsive navbar. You can check it out here. The tutorial showcases the mobile version of the navbar using the javascript function classList.toggle. I was ...

javascripthtmlcsscss-transitions

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquerycsssafarislideshowopera

Apply the cursor property to the audio element and set it as a pointer

I have a question: how can I apply a cursor style to my <audio> controls? When I try to add them using CSS, the cursor only appears around the controls and not directly on the controls themselves. Below is the code snippet: <audio class="_audio" ...

javascripthtmlcss

Having trouble with Javascript/jQuery not functioning in IE8?

My current project involves a website that functions smoothly in Chrome, but encounters issues with running JavaScript/jQuery scripts in IE8. Even a simple alert on page load fails to execute. Admittedly, my approach is a bit messy as I have mixed CSS an ...

phpjavascriptjqueryhtmlcss

Centered background position for CSS h2

Hey there! I've got this CSS code for my H2 heading: .rightBox h2 { background: url(images/lineh2.png) 0px 0px no-repeat; border-top: 1px solid #e4e4e4; margin-bottom: 15px; font-size: 22px; font-weight: 100; font-family: "Seg ...

htmlcss

Optimizing Spacing in Bootstrap 4.2.1 for Mobile Devices

There seems to be some odd spacing issues in the mobile version. Here are some images for reference: Here's how it appears on desktop: Desktop #01 Desktop #02 And now, the mobile version: Mobile #01 - showing extra spacing on the right side Mobi ...

htmlcssbootstrap-4spacing

By increasing the background-color to 100%, the list item obstructs the background image of its parent div

In cases where an element is set to display:block, the background-color of that element typically extends to 100% of the width of its parent element. However, I am seeking a solution where the background-color only reaches the edge of the text, allowing th ...

htmlcss

How can I apply styling to Angular 2 component selector tags?

As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...

javascriptcssangulartypescriptsass

Row in Internet Explorer 7

I have a function that reveals hidden rows in a table, which works perfectly in all tested browsers except for IE7. The function is written using Prototype.js. function showInactives(){ var row_list = $$('tr.inactive'); var ck =$('inactive_ ...

javascriptcssinternet-explorer-7

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

HTML/CSS Pricing structure

As a designer, I am attempting to craft a pricing table with a unique pricing arrangement. Despite my efforts with HTML and CSS, I am struggling to position the "12x" below the "R$" and have both appear next to the price of "219." Here is the pricing layo ...

htmlcssbootstrap-5

Mobile FPS suffering due to slide-out drawer performance issues

My application features a drawer menu that functions smoothly on desktop, but experiences issues on mobile devices with noticeable lag. Within the header, I have implemented a boolean value that toggles between true and false upon clicking the hamburger i ...

cssangularjsperformance

Achieving optimal functionality of @media queries when using buttons

My goal here is to achieve the following: Make these buttons responsive on all screen sizes Ensure that the buttons shift down when the screen size reaches Mobile size or smaller, while maintaining at least 4 buttons per row for future additions When the ...

htmlcssbuttonresponsive-designmedia-queries

The page is set to 100% width, yet the content is not completely occupying the space provided

I'm currently working on creating a responsive website using HTML, CSS, and Bootstrap 4. However, I am encountering difficulties in making my carousel width fill up the entire screen of Pixel 2 XL (landscape - w: 823px) and iPad (portrait - w: 768px). ...

htmlcssbootstrap-4