steven preadly
steven preadly
Explore posts from servers
CC#KPCKevin Powell - Community
PostsComments
KPCKevin Powell - Community
Created by steven preadly on 11/3/2024 in #front-end
How can I solve this swiper styling issue in the video ?
any ways i solved the problem iam using Laravel with Vite so some time bundling has some problems with lib that has CSS and JS together ,thank you
15 replies
KPCKevin Powell - Community
Created by steven preadly on 11/3/2024 in #front-end
How can I solve this swiper styling issue in the video ?
this is the html 
<section class="highly-ranked-books-section bg-dark mt-sm-5 mb-md-10 px-md-0 py-lg-7 py-sm-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="display-3 text-center">Highly Rated Reads</h1>
                <div class="swiper .books">
                    <div class="swiper-wrapper">
                        @foreach($books as $book)
                            <div class="swiper-slide">
                                <div class="card">
                                    <img src="{{ $book->cover_image }}" class="card-img-top img-fluid" alt="...">
                                    <span id="badge" class="badge text-bg-primary z-1 d-inline">Primary</span>
                                    <div class="card-body">
                                        <h2 class="card-title">{{ $book->title }}</h2>
                                        <div class="d-flex justify-content-between">
                                            <a href="">{{ $book->genre->name }}</a>
                                            <livewire:rating.rating :book="$book"/>
                                        </div>
                                        <p class="card-text">{{ $book->excrept }}</p>
                                        <a href="#" class="btn btn-primary">buy now </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div cass="swipe-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="highly-ranked-books-section bg-dark mt-sm-5 mb-md-10 px-md-0 py-lg-7 py-sm-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="display-3 text-center">Highly Rated Reads</h1>
                <div class="swiper .books">
                    <div class="swiper-wrapper">
                        @foreach($books as $book)
                            <div class="swiper-slide">
                                <div class="card">
                                    <img src="{{ $book->cover_image }}" class="card-img-top img-fluid" alt="...">
                                    <span id="badge" class="badge text-bg-primary z-1 d-inline">Primary</span>
                                    <div class="card-body">
                                        <h2 class="card-title">{{ $book->title }}</h2>
                                        <div class="d-flex justify-content-between">
                                            <a href="">{{ $book->genre->name }}</a>
                                            <livewire:rating.rating :book="$book"/>
                                        </div>
                                        <p class="card-text">{{ $book->excrept }}</p>
                                        <a href="#" class="btn btn-primary">buy now </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div cass="swipe-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
    </div>
</section>
15 replies
KPCKevin Powell - Community
Created by steven preadly on 11/3/2024 in #front-end
How can I solve this swiper styling issue in the video ?
I can send the css and the html of the component
15 replies
KPCKevin Powell - Community
Created by steven preadly on 11/3/2024 in #front-end
How can I solve this swiper styling issue in the video ?
What happens is that when the page loads the cards came under each other then after the age is fully loaded it becomes normal
15 replies
KPCKevin Powell - Community
Created by steven preadly on 11/3/2024 in #front-end
How can I solve this swiper styling issue in the video ?
The lib is working swiper but the css is what crashed
15 replies
KPCKevin Powell - Community
Created by steven preadly on 11/3/2024 in #front-end
How can I solve this swiper styling issue in the video ?
I am sharing a demo its not regarding the lib it's regarding the css
15 replies
KPCKevin Powell - Community
Created by steven preadly on 11/3/2024 in #front-end
How can I solve this swiper styling issue in the video ?
Why no one answers my questions
15 replies
KPCKevin Powell - Community
Created by steven preadly on 6/29/2024 in #front-end
what are the ways that i can follow to mange the height in card created using bootstrap
i will try
18 replies
KPCKevin Powell - Community
Created by steven preadly on 6/29/2024 in #front-end
what are the ways that i can follow to mange the height in card created using bootstrap
if i added the col class with the card class i cant use gutter to make space between the first card and the secoun
18 replies
KPCKevin Powell - Community
Created by steven preadly on 6/29/2024 in #front-end
what are the ways that i can follow to mange the height in card created using bootstrap
i am still have the same problem
18 replies
KPCKevin Powell - Community
Created by steven preadly on 6/29/2024 in #front-end
what are the ways that i can follow to mange the height in card created using bootstrap
In that case there is no need to us the columns I can instead use flexox in that case
18 replies
KPCKevin Powell - Community
Created by steven preadly on 6/29/2024 in #front-end
what are the ways that i can follow to mange the height in card created using bootstrap
it is gap-1 ,2,3 etc
18 replies
KPCKevin Powell - Community
Created by steven preadly on 6/29/2024 in #front-end
what are the ways that i can follow to mange the height in card created using bootstrap
i am using bootstrap
18 replies
KPCKevin Powell - Community
Created by steven preadly on 6/20/2024 in #front-end
Why is the <div> with position-absolute and start-100 positioned outside the container?
@MarkBoots @Mannix thank you
17 replies
KPCKevin Powell - Community
Created by steven preadly on 6/20/2024 in #front-end
Why is the <div> with position-absolute and start-100 positioned outside the container?
so in case of the relative its better to us rem or px if i am using it alone
17 replies
KPCKevin Powell - Community
Created by steven preadly on 6/20/2024 in #front-end
Why is the <div> with position-absolute and start-100 positioned outside the container?
the secound one will start from right and move to the right
17 replies
KPCKevin Powell - Community
Created by steven preadly on 6/20/2024 in #front-end
Why is the <div> with position-absolute and start-100 positioned outside the container?
i have some conflicts regarding left and right, where do any of them starts when i set right:0% this means start from the left and when i use right:100% this means start from the right is that correct ?
17 replies
KPCKevin Powell - Community
Created by steven preadly on 6/20/2024 in #front-end
Why is the <div> with position-absolute and start-100 positioned outside the container?
in most cases don't like to use the bootstrap positioning classes specially the in part of re positioning like end start ,buttom , top
17 replies
KPCKevin Powell - Community
Created by steven preadly on 6/20/2024 in #front-end
Why is the <div> with position-absolute and start-100 positioned outside the container?
so its suppose to be right:0% correct?
17 replies
KPCKevin Powell - Community
Created by steven preadly on 6/20/2024 in #front-end
Why is the <div> with position-absolute and start-100 positioned outside the container?
@Mannix its a bootstrap class that got translate to `left:100;"
17 replies