Reputation:

How to use specificity with css?

I have boxes that I want aligning. I can't alter the html really so my only option is css. Using:

@media (min-width: 768px){.entry-content a {width: 32%;}}

works to align the divs, at least in every aspect except height. However it effects others boxes on another page which are anyway in a different format.

So I tried the following in order to specify and thereby differentiate.

@media (min-width: 768px){.box-layout >.entry-content a {width: 32%;}}

And:

@media (min-width: 768px){.box-layout.entry-content a {width: 32%;}}

Didn't work.

Anything with .entry-content appears to effect other divs, so how can I specify? Basically I want all the boxes here: https://adsler.co.uk/find-an-event/ the same size and height with 3 x 3 in a grid.

I also tried to leave out . entry-content altogether by using:

@media (min-width: 768px){.event-img {
max-height: 190px;
overflow: hidden;
 }}

I also tried:

#content .entry-summary img.wp-post-image, #content 
.entry-content img { 
height: 250px;
}

.box-layout { 
width: 100%
}

This aligned the height but the spaces between got narrower and it uses entry-content so messed up my other boxes on another page.

Also tried this in my header.php

<style>
@media (min-width: 768px) {
    .entry-content a {
        width: 32%;
    }
}
</style>

Didn't achieve what I want.

This is the closest I've come.

<style>
@media (min-width:768px) {.entry-content 
.event_listings{ display:flex; flex-wrap:wrap; }} @media 
(min-width: 768px){.entry-content .event_listings 
.event_listing{ width:20%; padding:0 20px; }} @media 
(min-width: 768px) {.entry-content .event_listings 
.event_listing .box-layout{ width:100%; float:none; 
height:100%; }} @media (min-width: 768px){.entry-content 
.event_listings .event_listing .box-layout{ display:flex; flex- 
direction:column; }} @media (min-width: 768px){.entry. 
content .event_listings .event_listing .box-layout .event. 
title{ flex-grow: 1; }}
</style>

This works in my header.php but boxes are 5 x 5 and different sixes...

Here is my html:

<div class="line-layout" style="display: none;">
    <li class="event_listing post-6985 type-event_listing status-expired hentry" style="visibility: visible;" data-latitude="" data- longitude="">
        <div class="event-info-row-listing">
            <a href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
                <div class="row">
                    <div class="col-md-1">
                        <div class="organizer-logo">
                            <img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="event-title">
                            <h4>New Cross and Deptford Free Film Festival</h4>
                            <div class="boxes-view-listing-registered-code">
                        </div>
                        <div class="event-organizer-name">
                            <normal>Deptford Film Festival
                                <normal></normal>
                            </normal>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="date" <date>2019-05- 26</date>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="event-location">
                        <i class="glyphicon glyphicon-map-marker"></I> London 
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="event ticket">#free</div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </a>
    </div>
</li>

<!-- Box Layout -->
<a class="event_listing post-6985 type-event_listing status-expired hentry" href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
    <div class="box-layout">
        <div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
        </div>
        <div class="boxes-view-box-registered-code"></div>
        <div class="event-title">
            New Cross and Deptford Free Film Festival
        </div>
        <div class="event-start-date">2019- 05-26</div>
        <div class="event-location">
            <i class="glyphicon glyphicon-map-marker"></i> London 
        </div>
        <div class="box-footer">
            <div class="event-ticket">#free</div>
        </div>
    </div>
</a>

Upvotes: 1

Answers (3)

user11652114

Reputation:

In head tag place:

Upvotes: 0

virus.pk

Reputation: 16

If you want to achieve this

Basically I want all the boxes here: https://adsler.co.uk/find-an-event/ the same size and height with 3 x 3 in a grid.

Then your simplest option would be to put them in a flexbox like this A Complete Guide to Flexbox

Upvotes: 0

KobiM1

Reputation: 81

Where did you put your CSS code? Paste the whole file code

Anyway if you didn't try, open a <style> tag in your HTML file and paste the CSS there.

<style>
    @media (min-width: 768px) {
        .entry-content a {
            width: 32%;
        }
    }
</style>

That should affect only on the page it was pasted.

Upvotes: 2

How to use specificity with css?

Answers (3)

Related Questions