logo
Tags down

shadow

Inline Block divs changing height on Active State


By : Geoffrey
Date : May 04 2020, 07:25 AM

I try to  have 4 boxes on my screen with some active effect like changing font size and some padding-top (to move the text down a little). everything is working well except that when I click on the boxes, it adds white space around that or the neighbouring boxes.

I need to adding a span inside the div with inline-block 100% height/width and applying the :active class to that span instead, then it would work fine for the top two boxes but the bottom two boxes would still do the same thing.

https://jsfiddle.net/946v3o1t/4/

<div id="container"><div class="div one">div1</div><!-- 
--><div class="div two">div2</div><!-- 
--><div class="div three">div3</div><!-- 
--><div class="div four">div4</div></div>


@import url('https://fonts.googleapis.com/css?family=Acme|Righteous&display=swap');

body, html{
    padding: 0;
    margin: 0;
    user-select: none;
    font-family: 'Acme', sans-serif;
        }
#container{
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow: none;
    }
.div{
    height: 50vh;
    width: 50vw;
    max-width: 50%;
    display: inline-block;
    text-align: center;
    line-height: 50vh;
    color: white;
    font-size: 4rem;
    overflow: none;
}
.div:hover{
    cursor: pointer;
}
.div:active{
    font-size: 3.8rem;
    padding-top: 5px;
}
.one{
    background-color: #005b9f;
}
.two{
    background-color: #004c40;
}
.three{
    background-color: #6c6f00;
}
.four{
    background-color: #a00037;
}

What do I need to fix this and  change so that when I click on the boxes, it only update the content as styled and not change the height/width or style for the neighbouring divs.

Answer :

best way to fix this is the new CSS grid spec or flex, I've updated your code here so it works properly:

https://jsfiddle.net/xL8g9jyh/

    .div{
        height: 50vh;
        width: 50vw;
        display: block;
        text-align: center;
        line-height: 50vh;
        color: white;
        font-size: 4rem;
        overflow: none;
        float:left;
        box-sizing: border-box;
    }

Basically:

  1. Use float:left and display:block instead of display:inline-block and max-width.
  2. Use box-sizing: border-box; so the div does not change size when you add padding.
  3. Also, don't forget to assign overflow: hidden; in the body css element as this locks the global size of the body, thus preventing displaying scrollbars unintentionally.

Please let me know if it works for you fine .



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org