Click here to Skip to main content
15,939,853 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Now the problem is when I go in responsive mode and make it responsive, I don't want this div to shrink with page shrinking. I only want it to be responsive when the page reaches its width.
HTML
<div class="container">
        <div class="container2">
            <a href="https://www.google.com">Explore</a>
            <img src="cont.jpg">
        </div>
</div>

CSS
.container{
      border: 2px solid red;
      overflow: hidden;
      height: 16%;
      width: 70%;
      margin: auto;
      position: relative;
  }

.container div{
      border: 2px solid black;
      display: inline-block;
  }
.container2{
    
    margin-right: 250px ;
    float: right;
    /* flex-shrink: unset; */
    width: 24vw;
    height: 99%;
    position: relative;
  }

  .container2 a{ 
      background-color: white;
    border: 2px solid white;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    color: rgb(0, 0, 0);
    padding: 12px 18px;
    text-decoration: none;
    transition: background-color .3s;
  }

.container2 a:hover{
      background-color: transparent;
      color: white;
  }

.container2 img{
    object-fit: cover;
      height: 100%;
      width: 100%;
  }


What I have tried:

I have tried many things like giving the height in % or something but nothing gets in my mind. Help me out here.
Posted
Comments
Richard Deeming 2-Jun-21 8:18am    
It's not clear from your description what you're actually trying to achieve here.
Peter_in_2780 2-Jun-21 18:58pm    
Look at CSS properties min-width, max-width, min-height, max-height.
But beware, they can do some very peculiar things to a responsive layout.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900