0

I'm trying to improve myself on button design, I tried many css functions, but I couldn't make the template I wanted. Desktop version is good for me you can check below the code, I want to keep the desktop design on mobile. Can someone enlighten me about @media queries.....................................................

    <div id="ana_div">
    <a href="url1">
        <div class="divi" id="div">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url2">
        <div class="divi" id="div2">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url3">
        <div class="divi" id="div3">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url4">
        <div class="divi" id="div4">
            <button class="btnnn"> but</button>
        </div>
    </a>
    <a href="url5">
        <div class="divi" id="div5">
            <button class="btnnn"> but</button>
        </div>
    </a>
</div>

<style>
    
#ana_div {
    
    height: 200px;
    width: 710px;
    margin: auto;
}

.ikon
{
visibility:none;
}

.divi {
    height: 100px;
    width: 310px;
    cursor: pointer;
 

}
.btnnn {
  border: 3px solid black;
  border-image:linear-gradient(to right, black,#1ebd9d ) 30;
  color: black;
    height: 80px;
 width: 300px;
  font-size: 19px; 
  cursor: pointer;
  background-color: #fff;

  
}
.btnnn:hover {
   background-image: linear-gradient(to right,black,#1ebd9d);
     box-shadow: 2px 2px 10px 2px #1ebd9d;
  transition: background-image .3s linear;
  transition: box-shadow .3s linear;

}

</style>
Jozef Stone
  • 13
  • 5
  • What do you mean by *'line up all the buttons in threes"*? *"but while doing this, the buttons shift to the right in the mobile view"* - show us the code you used. – Spectric Jul 15 '21 at 17:20
  • yeah I also could not understand what is the actually meaning of this! – Gulshan Aggarwal Jul 15 '21 at 17:22
  • line them up vertically or horizontally? It's not clear what you're asking – dev sandbox Jul 15 '21 at 17:27
  • can you make it a bit more clear. actually your buttons are left aligned in both desktop and mobile view. cant find it aligning "right". – legacy Jul 15 '21 at 17:31
  • vertically line up for mobile or keeping desktop design for mobile – Jozef Stone Jul 15 '21 at 17:31
  • as a starting point, rather than mdn, may be you can refer this to get an idea about media queries. https://css-tricks.com/a-complete-guide-to-css-media-queries – legacy Jul 15 '21 at 17:36
  • you can refer this answer also, for refering media queries. https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – legacy Jul 15 '21 at 17:41

1 Answers1

0

Instead of width and height in the .btnn, I suggest you use padding. Padding makes your buttons responsive on all screens. Use

padding: 1rem 1.5rem;

Or use

@media (max-width){

/* Your styles (reduce the width and height) */

}

You want to line up the buttons?

Add display :flex; and flex-direction: column; to the overall parent div

I_love_vegetables
  • 1,644
  • 5
  • 11
  • 25
TheDejareDaniels
  • 46
  • 5