CODEWITHSUNDEEP
htmlcss
buriedinkant
buriedinkant

Reputation: 383

How to change size of only one element in a class while keeping everything else the same?

I want to change the width of one of my elements in my "logos" class using Javascript. But when I change the width of the target element in my "logos" class to 5.9%, the positioning of the other elements also changed. I want the positioning the other elements to not change when I increase the size of the image inside their shared div. Is there any way to get around this? I'm pretty new to css, thanks for your help.

html:

<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" type="text/css" href="index.css"> 
<title>Sexism in Silicon Valley</title>
</head>
<body id="body">
<div class="parentz"id="parent1">
    <img src="img1.png" class="logos" id="id1">
    <img src="img2.png" class="logos" id="id2">
    <img src="img3.png" class="logos" id="id3">
    <img id="id4" src="img4.png" class="logos">
</div>
<div class="parentz" id="parent2">
    <img src="img5.png" class="logos" id="id5">
    <img src="img6.png" class="logos" id="id6">
    <img src="img7.png" class="logos" id="id7">
    <img src="img8.png" class="logos" id="id8">
</div>
<script src="index.js"></script>
</body>

</html>

css:

body { 
    background: #907D7C; 
    -webkit-transition: background 1.5s;

} 
.parentz {
    background: #907D7C;
    text-align: center;
    margin-top: 9%;
    border: white;
    border: 5px;


    -webkit-transition: background 1.5s;

}

#parent2 {
    margin-top: 3%;

}

.logos {
    width: 5.5%;
    height: 18%;
    border-radius: 90px;  
    margin-right: 25px; 
    padding: .5%;

}

Upvotes: 0

Views: 529

Answers (1)

Farrukh Subhani
Farrukh Subhani

Reputation: 2038

Add another class like 'logoslarge' and use that to override size so you will have 'logos logoslarge' as class on that element.You can then just write

.logoslarge { width:5.9%}

This would only apply to those elements that have new class.

Upvotes: 1

Related Questions