The div shadow is not displaying and appearing next to each other

There seems to be an issue with the shadow of the Div blocks not appearing correctly. Instead, the shadows are showing up side by side on the last block. Even though I have set the z-index and position to relative, it's still not functioning as anticipated.

Edit: My goal is to have the blocks aligned next to each other and responsive.

.main {
  padding-top: 10px;
  -moz-column-count: 4;
  -moz-column-gap: 0;
  -webkit-column-count: 4;
  -webkit-column-gap: 0;
  column-count: 4;
  column-gap: 0;
}

.main .columnBlock {
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 0 4px 8px 8px;
  -webkit-box-shadow: 0px 2px #d4d6d8;
  -moz-box-shadow: 0px 2px #d4d6d8;
  box-shadow: 0px 2px #d4d6d8;
  position: relative;
  z-index: 999;
}

.column {
  display: inline-block;
  min-width: 140px;
  width: 22%;
  vertical-align: top;
  padding-top: 8px;
}

.column ul {
  margin-top: 4px;
  margin-bottom: 1em;
}

.column ul {
  display: inline-block;
  width: 100%;
  vertical-align: baseline;
  height: 100%;
}

@media screen and (max-device-width: 9999px) {
  .column {
    width: 100%;
    height: auto;
    float: none;
  }
}
<div class="main" style="width: 100%;">
  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>
  <!-- .columnBlock -->

</div>
<!-- .main -->

htmlcss

Answer №1

This solution aligns with what you are seeking. By eliminating the column count and gap, I utilized margin and floats in conjunction with @media queries. Additionally, two extra columns have been incorporated to showcase its functionality.

The following HTML structure is recommended:

<div class="main" style="width: 100%;">
  <div class="columnBlock">
    <div class="column">
      <ul>
        <li><a href="">Data 1</a></li>
        <li><a href="">Data 2</a></li>
        <li><a href="">Data 3</a></li>
      </ul>
    </div>
  </div>

  <!-- Additional columnBlock elements can be included here -->

</div>
<!-- End of main section -->

For the CSS styling, consider implementing the following guidelines:

.main {
  padding-top: 10px;
display: flex;
flex-wrap: wrap;
}

.main .columnBlock {
  /* CSS properties for column blocks */
}

/* Further CSS rules based on media queries can be added as needed */

.column {
  /* Styling for individual columns */
}

.column ul {
  /* CSS styling for unordered lists within columns */
}

To view a live demonstration and test the responsiveness, click this link to access the updated fiddle: https://jsfiddle.net/u2h1cwzt/3/

Your content shadows are positioned correctly according to specifications, ensuring full responsiveness across various screen sizes.

Note: In case you prefer an alternative approach without using Flexbox, you can explore the modified version available via this link: https://jsfiddle.net/u2h1cwzt/4/

CSS adjustments for the non-Flex design are detailed within the provided code snippet for easy implementation.

Answer №2

Seems like this might be the solution you're searching for (if I've understood correctly). I implemented AngularJS ng-repeat for ease of use, but there's also a version available with just HTML and CSS.

Here are the links:

Angular version: https://jsfiddle.net/suunyz3e/1408/

HTML/CSS only version: https://jsfiddle.net/suunyz3e/1410/

HTML:

<div ng-app="myModule" ng-controller="myCtrl">
        <div class="div-item" ng-repeat="item in loopArray">
          <ul>
            <li><a href="">Data 1</a></li>
            <li><a href="">Data 2</a></li>
            <li><a href="">Data 3</a></li>
          </ul>
        </div>
    </div>

CSS:

.div-item{
  display:inline-block;
  min-width:140px;
  background-color:#fff;
  margin:5px;
  border:1px solid red;
  border-radius: 4px;
  -webkit-box-shadow: 0px 2px #d4d6d8;
  -moz-box-shadow: 0px 2px #d4d6d8;
  box-shadow: 0px 2px #d4d6d8;
}

AngularJS script:

angular.module('myModule', [])

.controller('myCtrl', function ($scope) {

   $scope.loopArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

});

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

Footer rises with bootstrap zooming

Hey everyone! I'm a beginner in the world of web development and currently working on creating my own website. I've run into an issue with my footer - I want it to stay fixed at the bottom even when zoomed in, but for some reason, when I zoom in, ...

htmlcssbootstrap-4footer

Is there a way to control the text animation loop on iTyped, both starting and stopping it?

Currently utilizing React, MUI, along with iTyped The animation implemented involves backspacing text and typing the next word in a specified array until reaching the final word. I am looking to enable a click function on the div containing this animation ...

javascripthtmlcssreactjsanimation

Verifying the Compatibility of Linear Gradient in CSS

To verify support for CSS properties such as border-radius, use the following code snippet: if(document.createElement('test').style.borderRadius===''){ //some code } But how can I check for support of linear gradients? The declaration ...

javascripthtmlcsscross-browser

What is the method for ensuring that a GreaseMonkey script impacts elements on a page prior to their appearance?

I'm currently working on a project that requires hiding images on a specific website while still displaying the alt text. Initially, I tried to achieve this using Stylish on Firefox and posted the following question: How to force an image's alt ...

javascripthtmlgreasemonkey

Printing using *ngFor will display items in an ascending order

When attempting to display an object in markup, I am running into the issue of *ng printing it in ascending order instead of maintaining the original order. Ideally, I would like the elements to be printed as they are. You can view my code on StackBlitz ...

javascripthtmlangulartypescript

Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

I am working on a project using Ionic 2 and I have implemented multiple tabs in the application. However, I need to find a way to hide the top tab when the user clicks on the bottom tabs menu icon. Here is my Plunker for your reference. My goal is to ma ...

htmlcssangularionic2

Is it possible to enable zooming on a streamgraph?

I came across an interesting example of a streamgraph on this link. It got me thinking - can a streamgraph be made zoomable, similar to a line chart like in this zoomable line chart? I haven't been able to find any examples of a "zoomable streamgraph" ...

javascripthtmld3.jsstream-graph

Place text in the center of a div and add a numbered circle beside it

I need help adding a circle with a number next to a div containing centered text. Take a look at the image I have attached for reference. https://i.sstatic.net/tHA65.png I believe I am close to achieving the desired outcome, but I am struggling to center ...

htmlcssfrontend

Transferring information from a form with multiple fieldsets to php

I am facing an issue with my form that is built using multiple fieldsets. The problem is related to passing values from each fieldset to welcome.php upon submitting the form. However, when I click submit, nothing happens and the values are not displayed. A ...

phpjqueryhtmlforms

Two objects precisely located in the same spot yet not visible simultaneously

There are two elements here. One is a transparent button, and the other is an image positioned behind it. The background property didn't work for me, so I attempted different variations without success: .top-container > button { background-ima ...

htmlcsscss-positionbackground-image

What is the right way to efficiently rotate a View in React Native?

Here is my code snippet: <View style={{borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}> <Text>Hi</Text> </View> The result can be seen here: https://i.sstatic.net/C9ryl.jpg Unf ...

cssreact-nativejsx

Deactivate a few CSS guidelines

For my project, I am incorporating interfaces within other interfaces and have been facing conflicts between bootstrap rules and other CSS files. To address this, I encapsulated all Bootstrap rules within a .use_bootstrap class. Now, within my interfaces ...

htmlcsstwitter-bootstrapcss-selectors

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors

Error: The background image is not displaying correctly on the .net webpage

I have included a link to an image but I am having trouble getting it to show up on my website. I even tried putting the image in a different folder, but still no luck with displaying it. Any assistance on this matter would be greatly appreciated. I hav ...

htmlcssbootstrap-4

Navigating through the Jquery DOM to access a specific node

Displayed here are a list of products, presented within an unordered list: Users can express interest in specific items by clicking "I am Interested," prompting a change in background color and the appearance of a tick mark next to the selected item. To ...

javascriptjqueryhtml

Tips for creating a stylish navbar with a faded effect on the right side and integrating a fresh button into its design

I'm looking to enhance my Navbar by implementing a feature where, if the width of the Navbar exceeds that of its parent div, it will fade on the right side and a new button will be added - similar to what can be seen on Youtube. 1- When the Navbar&ap ...

javascripthtmlcssvue.jsbootstrap-4

Issue encountered during the execution of the project on wamp server

I am working on a PHP 5 website and have downloaded all the files from the server to my WAMP for editing some text. However, when I try to run localhost, I encounter an error: **Internal Server Error The server has encountered an internal error or miscon ...

phphtml

Toggle the display of the following element with a sliding animation

Can you help me create 5 <p> tags that can toggle the display of a corresponding <div> element beneath them? I know I could individually name each pair, but that would require a lot of jQuery code. Currently, my setup looks like this: <p c ...

jqueryhtmlslidetoggle

Display information using HTML elements within a loop in JavaScript

I am facing an issue with iterating over an array of objects in JavaScript. Each object contains multiple parameters, and my goal is to extract the data from each object and display it in a table or a grid format. Here is an example of my code: function ...

javascripthtmlbootstrap-4

Why is Bootstrap 4 causing these columns to stack vertically instead of horizontally?

After upgrading to bootstrap 4, I noticed that my gallery layout has changed from horizontal in bootstrap 3 to vertical. What could have caused this sudden change? To see the issue, here is a link to a fiddle. Here are my column settings: <div class= ...

csstwitter-bootstrapbootstrap-4