I am trying to build a feed page, gave it a display: grid, where articles are going to be displayed in the right side and the left side for an ad banner.
I created an Article component and added it to the right section where it should be but when I created the ad banner div I realized it's not displayed ( as shown in the screenshot below ), even though everything is fine with the CSS.
BUT when I inspected the elements in the browser I noticed that a display: none !important property is added to <div className="ad-banner"></div> ( as shown below ) even though I didn't add it
I have tried adding display: block !important in the CSS file but it doesn't do anything.
I don't know why is this even happening? what's causing this ?
Here's the screenshots:
The ad-banner div is not displayed in the page
Here's the code:
BlogsFeed.jsx:
import React from "react";
import FeedNavbar from "../../components/layouts/feedNavbar/FeedNavbar";
import Footer from "../../components/layouts/footer/Footer";
import Article from "../../components/widgets/article/Article";
import "./BlogsFeed.css";
import artImg from "../../stock/galaxy.jpg";
import user1 from "../../stock/user1.jpg";
const Feed = () => {
return (
<div className="feedPage">
<div className="core">
<div className="popular-carousel"></div>
<div className="core-feed">
<div className="ad-banner">ad here</div>
<section className="recent-section">
{Array.from({ length: 3 }).map((_, index) => (
<Article
articleTitle={"Lorem ipsum dolor sit amet consectetur"}
articleContent={
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quidem molestias praesentium beatae est quia illum debitis maiores magni suscipit dicta harum quas nobis, rem, aliquam iste perferendis ipsam amet natus temporibus repellat iusto ex sapiente. Sit incidunt voluptatum ratione quisquam! Totam consectetur vero, velit esse modi ab dolorem odit aspernatur ad corrupti exercitationem quod molestiae minima incidunt, voluptatibus voluptates nobis quasi nihil. Praesentium, esse corporis voluptatum, illo ipsam tempore vitae earum, ea consequuntur repudiandae obcaecati reiciendis labore. Vel, a pariatur dolore aspernatur, incidunt eveniet ipsum et itaque error tempora quod nemo eos sapiente possimus deleniti magni consequuntur beatae repellendus quaerat! Quo velit, ipsam ea neque saepe qui amet, magnam aspernatur voluptates laudantium dolorem. Rem excepturi repellat expedita numquam temporibus alias iste autem voluptate eligendi ducimus laudantium soluta iure nihil veniam hic itaque odit, eius delectus facilis maiores laboriosam culpa ullam quidem. Ad eos natus nobis ab, temporibus velit consequatur ducimus molestias non, pariatur magnam reprehenderit ea. Voluptatem atque laborum obcaecati delectus aliquid doloremque explicabo harum debitis commodi maiores? Excepturi fugit laudantium animi earum perspiciatis a, sint libero porro esse, veritatis enim ipsum ad. Mollitia veritatis ratione dolore obcaecati. Suscipit, minima et, culpa aliquid mollitia itaque perferendis tempora voluptatibus accusantium atque inventore voluptas facere necessitatibus iste nihil optio quasi ipsam impedit a sint voluptatum nulla? Ex explicabo nesciunt ipsam sunt totam, eum, ipsum consequatur voluptates fugiat doloribus maiores. Earum aliquid dolore quas at, eos blanditiis aperiam labore assumenda porro, suscipit eligendi deleniti consequatur sunt ipsam inventore? Provident molestiae reprehenderit, eaque excepturi vero consequuntur laudantium repellendus fuga! Nostrum repellendus nobis pariatur? Voluptas accusantium vero magnam ad, nam distinctio ab ea similique harum, vel omnis iste. Sed nisi pariatur soluta, ratione aliquam quod sint iure molestias perferendis qui architecto ut? Odit aliquam nemo voluptatum, veniam tenetur aspernatur beatae quidem nihil. Mollitia delectus enim aut iusto, suscipit minus dolore ullam dolor adipisci quo eius, doloribus repellendus eligendi quos quas ex doloremque dignissimos non! Perferendis quaerat nesciunt corrupti qui corporis amet dicta est ratione animi repudiandae quae obcaecati perspiciatis error dolores, incidunt, deserunt illum, officiis pariatur aspernatur. Ab totam nostrum soluta doloremque deserunt sequi doloribus repellat labore enim voluptatem! Distinctio, qui nisi accusantium perspiciatis quo maiores a, odio perferendis tempore fuga, voluptas in. Nam commodi repellendus quasi odio! Provident deleniti quaerat vel nobis modi. Dolores, odio obcaecati sed temporibus natus, veritatis sit eum necessitatibus nobis laboriosam inventore dolore eligendi consectetur aliquid deleniti accusantium modi, quae cupiditate expedita fugiat architecto nesciunt hic blanditiis? Ipsam temporibus quam ratione nam nostrum perferendis iste adipisci impedit, incidunt explicabo quo ducimus architecto aperiam quasi dicta? Inventore ipsa numquam similique sapiente quaerat iusto reprehenderit officiis!"
}
articleAuthorPic={user1}
articleAuthorName={"David Avelar"}
articleDate={"Feb 5"}
articleTimeToRead={"8 min read"}
articleImg={artImg}
key={index}
/>
))}
</section>
</div>
</div>
<FeedNavbar />
<Footer />
</div>
);
};
export default Feed;
BlogsFeed.css:
.feedPage {
width: 100vw;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-top: 3rem;
}
.core {
width: 100vw;
display: grid;
grid-template-columns: auto;
grid-template-rows: 20rem auto;
background-color: white;
padding: 4rem;
}
.popular-carousel {
grid-column: 1/2;
grid-row: 1/2;
}
.core-feed {
grid-column: 1/2;
grid-row: 2/3;
display: grid;
grid-template-columns: 1fr 1fr;
}
.ad-banner {
grid-column: 1/2;
background-color: #dadada;
}
.recent-section {
grid-column: 2/3;
}
.recent-section > * {
margin: 1rem 0;
}
EDIT:
It turns out that the problem was caused by the ad-blocker that I had in my browser, but why is that ?
Why would having an ad-blocker affect my html elements in that way ? why that element in particular ?
And does that mean that I have to turn off my ad-blocker evrytime when I'm coding ?
Is there any other way to prevent this from happening without turning the ad-blocker off ?