0

my college gallery code style not working.

my college gallery code style not working. using flex CSS style and when I inspected on chrome is not showing. only i have to press + new style rule on the top right corner of chrome inspector also inline style is the only thing working for me. I need help, please. ###

body {
    margin: 4rem;
    box-sizing: border-box;
}

#cola-main {
    display: flex !important;
    width: 100%;
    position: relative;
    margin: 5rem;
    justify-content: center;
}

.cola_column {
    display: block;
    flex-basis: 0;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 1.45rem;
}

.photo_item {
    position: relative;
    display: block;
    z-index: 0;
}

div img {
    width: 300px;
}
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/b07ab3b520.js" crossorigin="anonymous"></script>
    <title>1nd</title>

    <body>
<div class="main">
            <div id=“cola-main”>

                <div class=“cola_column”>
                    <div class=“photo_item”>
                        <img src="https://picsum.photos/id/237/200/" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1002/4312/2868.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1/5616/3744.jpg" alt="">
                    </div>
                </div>

                <div class=“photo_column”>

                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1010/5184/3456.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1011/5472/3648.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/102/4320/3240.jpg" alt="">
                    </div>
                </div>

                <div class=“photo_column”>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1025/4951/3301.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/103/2592/1936.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1062/5092/3395.jpg" alt="">
                    </div>
                </div>

            </div>
        </div>


    </body>
</head>

</html>
--------------CSS---------
body {
    margin: 4rem;
    box-sizing: border-box;
}

#cola-main {
    display: flex !important;
    width: 100%;
    position: relative;
    margin: 5rem;
}

.cola_column {
    display: block;
    flex-basis: 0;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 1.45rem;
}

.photo_item {
    position: relative;
    display: block;
    z-index: 0;
}

div img {
    width: 300px;
}
-----------my html--------------
<div class="main">
            <div id=“cola-main”>

                <div class=“cola_column”>
                    <div class=“photo_item”>
                        <img src="../images/banner.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port1.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port1.png" alt="">
                    </div>
                </div>

                <div class=“photo_column”>

                    <div class=“photo_item”>
                        <img src="../images/port2.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port3.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port4.png" alt="">
                    </div>
                </div>

                <div class=“photo_column”>
                    <div class=“photo_item”>
                        <img src="../images/port5.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port6.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port7.png" alt="">
                    </div>
                </div>

            </div>
        </div>
Hossam Elnaggar
  • 71
  • 3
  • You should consider formatting your question in two parts, expected/desired behaviour and what you currently have. the chrome inspector part is hard for anyone to understand – van Mar 08 '20 at 17:39
  • yes, you right. so my desired or what I want is I need three column gallery pic side by side as a college. – Hossam Elnaggar Mar 09 '20 at 15:14

1 Answers1

0

First of all your css selectors are not working because you are not using the standart quotes - " in your html but some other ones (I guess from your own language) - “”. I suppose you want something like this (I simplified your code a little bit, but a lot of stuff can be removed):

body {
  padding: 4rem;
  margin: 0;
}

.cola_column {
  display: flex;
  justify-content: center;
}

.photo_item img {
    height: 100%;
    object-fit: cover;
    width: 300px;
}
<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <script src="https://kit.fontawesome.com/b07ab3b520.js" crossorigin="anonymous"></script>
        <title>1nd</title>
    
    <body>
        <div class="main">
            <div>
                <div class="cola_column">
                    <div class="photo_item">
                        <img src="https://picsum.photos/id/237/200/" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1002/4312/2868.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1/5616/3744.jpg" alt="">
                    </div>
                </div>
                <div class="cola_column">
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1010/5184/3456.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1011/5472/3648.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/102/4320/3240.jpg" alt="">
                    </div>
                </div>
                <div class="cola_column">
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1025/4951/3301.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/103/2592/1936.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1062/5092/3395.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </body>
    </head>
    
    </html>

A bit of advice - don't use ids for selecting elements in css and learn what the code is actually doing.

dako
  • 1,081
  • 1
  • 12
  • 22
  • do you think I shouldn't wrap the img. and using class instead of ids will help? – Hossam Elnaggar Mar 19 '20 at 16:48
  • The issue with ids is that they should be unique, so you must style each element separately and that they have more priority than classes and it is easy to loose track of what is going on. About the wrapping ... it's not a big of a difference. – dako Mar 19 '20 at 20:40