Add wrapper around block if screen size if smaller than x-CodePudding

I have an image and a text inside it (bootstrap 5, but not relevant)

         <div >
            <img src="https://www.tutorialrepublic.com/lib/images/bootstrap-5.0-illustration.png"  alt="...">
            <div >
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>

If screen size is smaller than 800px, text from carousel-caption dissapears (display:none;), and I would like to wrap <a href=""> </a> so people would be able to press on image to proceed. So all text code should become this:

<a href="">
         <div >
            <img src="https://www.tutorialrepublic.com/lib/images/bootstrap-5.0-illustration.png"  alt="...">
            <div >
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
</a>

Not sure if its possible to do without javascript at all.

CodePudding user response：

You can change your .carousel-item div to a, remove the pointer-events and set the cursor as default on screen width >= 800px;

@media (min-width: 800px) {
  .carousel-item {
    pointer-events: none;
    cursor: default;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<a href="https://stackoverflow.com" >
  <img src="https://www.tutorialrepublic.com/lib/images/bootstrap-5.0-illustration.png"  alt="...">
  <div >
    <h5>First slide label</h5>
    <p>Some representative placeholder content for the first slide.</p>
  </div>
</a>

CodePudding user response：

One approach is as below, with comments in the code:

/* simple CSS reset to size all elements according to
   the border-box algorithm, including borders and
   padding inside the declared size of the element,
   whether width, height, inline-size or block-size,
   also removing default margins and padding, and
   setting all fonts to be 16px: */
*,
 ::before,
::after {
  box-sizing: border-box;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

/* this is simply to show that the media-queries
   are having an effect, and is otherwise entirely
   irrelevant: */
a div {
  background-color: var(--bgColor);
  transition: background-color 0.3s linear;
}

/* here we update the --bgColor custom property,
   as part of the demo to show that the media-
   queries are working, this is irrelevant to the
   functionality; so it can be removed: */
a[data-hidden-by-pagesize] {
  --bgColor: hsl(0deg 50% 90% / 1);
  /* here we use display: contents to position
     the elements as if the <a> wasn't present,
     a pseudo "unwrap": */
  display: contents;
  /* removing pointer-events in order that the
     functionality of the <a> elements is
     prevented (though I don't really understand
     the requirement): */
  pointer-events: none;
}


/* using an @media query, with the 'range' style of
   notation; here we respond to the document width
   being less-than 800px: */
@media screen and (width < 800px) {
  /* then we update the --bgColor property to show
     the functionality of the media-query: */
  a[data-hidden-by-pagesize] {
    --bgColor: hsl(150deg 50% 90% / 1);
    /* setting the display back to its 'default'
       or 'initial' state: */
    display: initial;
    /* and un-setting the pointer-events, to restore
       default functionality to the <a>: */
    pointer-events: unset;
  }
}

<!-- using the 'date-hidden-by-pagesize' attribute to provide a 'meaningful'
     selector for the relevant <a> elements, obviously adjust to something
     more appropriate for your use-case: -->
<a href="#demo" data-hidden-by-pagesize="">
  <div >
    <img src="https://www.tutorialrepublic.com/lib/images/bootstrap-5.0-illustration.png"  alt="...">
    <div >
      <h5>First slide label</h5>
      <p>Some representative placeholder content for the first slide.</p>
    </div>
  </div>
</a>

JS Fiddle demo.

References: