GoFuckYourself.com - Adult Webmaster Forum - Need some help with CSS and divs

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - Need some help with CSS and divs (https://gfy.com/showthread.php?t=1326922)

Smack dat

04-24-2020 02:53 PM

Need some help with CSS and divs

Hi,

Can anyone help me with a little formatting problem I have?

There are two problems:

1. In the image below, the full review links are not lined up. Obviously, this is due to the length of the review snippet above. How can I align them?

https://i.ibb.co/0cCSbXh/review-image.png
[click to view]

2. Also, in that image the div image looks rubbish. I think this is the CSS code that deals with it.

Code:

a.readmore span {

    display: block;

    background: url(images/readmore.png) no-repeat;

    height: 38px;

    padding: 0 0 0 19px;

}

This is the readmore.png image. How can I make it look better?

https://i.ibb.co/0hZsZZ6/readmore.png
[click to view]

machinegunkelly

04-24-2020 07:10 PM

Code:

<div class="site">

    <div class="review-container">

        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate

            placeat, tempora quia illum

            <a class="read-more" href="#">Read More</a>

        </div>

        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate

            placeat, tempora quia illum adipisci sequi est beatae obcaecati, quibusdam asperiores aut ducimus sed sint

            voluptate quasi sit provident.

            <a class="read-more" href="#">Read More</a>

        </div>

        <div class="review">Lorem ipsum dolor, est beatae obcaecati, quibusdam asperiores aut ducimus sed sint

            voluptate quasi sit provident.

            <a class="read-more" href="#">Read More</a>

        </div>

    </div>

</div>



<style>

    .site {

        max-width: 1170px;

        margin: auto;

        padding: 20px;

        ;

    }



    .review-container {

        display: grid;

        grid-template-columns: 1fr;

        grid-gap: 40px;

    }



    .review {

        padding: 20px;

        padding-bottom: 40px;

        position: relative;

        box-shadow: 0 0 6px rgba(0, 0, 0, .1);

    }



    .read-more {

        padding: 10px 30px;

        position: absolute;

        bottom: 0;

        left: 50%;

        transform: translate(-50%, 50%);

        background: #6f9454;

        color: #fff;

        text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);

        border-radius: 25px;

        border: 1px solid #435f2f;

        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 1px 1px 3px rgba(0, 0, 0, .3);

        text-decoration: none;



    }



    @media all and (min-width: 992px) {

        .review-container {

            grid-template-columns: 1fr 1fr 1fr;

        }



    }

</style>

:2 cents:

Smack dat

04-25-2020 02:13 PM

Quote:

Originally Posted by machinegunkelly (Post 22655643)

Code:

<div class="site">

    <div class="review-container">

        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate

            placeat, tempora quia illum

            <a class="read-more" href="#">Read More</a>

        </div>

        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate

            placeat, tempora quia illum adipisci sequi est beatae obcaecati, quibusdam asperiores aut ducimus sed sint

            voluptate quasi sit provident.

            <a class="read-more" href="#">Read More</a>

        </div>

        <div class="review">Lorem ipsum dolor, est beatae obcaecati, quibusdam asperiores aut ducimus sed sint

            voluptate quasi sit provident.

            <a class="read-more" href="#">Read More</a>

        </div>

    </div>

</div>



<style>

    .site {

        max-width: 1170px;

        margin: auto;

        padding: 20px;

        ;

    }



    .review-container {

        display: grid;

        grid-template-columns: 1fr;

        grid-gap: 40px;

    }



    .review {

        padding: 20px;

        padding-bottom: 40px;

        position: relative;

        box-shadow: 0 0 6px rgba(0, 0, 0, .1);

    }



    .read-more {

        padding: 10px 30px;

        position: absolute;

        bottom: 0;

        left: 50%;

        transform: translate(-50%, 50%);

        background: #6f9454;

        color: #fff;

        text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);

        border-radius: 25px;

        border: 1px solid #435f2f;

        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 1px 1px 3px rgba(0, 0, 0, .3);

        text-decoration: none;



    }



    @media all and (min-width: 992px) {

        .review-container {

            grid-template-columns: 1fr 1fr 1fr;

        }



    }

</style>

:2 cents:

Thankyou. Hope it works.

RyuLion

04-25-2020 02:38 PM

Quote:

Originally Posted by machinegunkelly (Post 22655643)

Code:

<div class="site">

    <div class="review-container">

        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate

            placeat, tempora quia illum

            <a class="read-more" href="#">Read More</a>

        </div>

        <div class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis sunt cupiditate

            placeat, tempora quia illum adipisci sequi est beatae obcaecati, quibusdam asperiores aut ducimus sed sint

            voluptate quasi sit provident.

            <a class="read-more" href="#">Read More</a>

        </div>

        <div class="review">Lorem ipsum dolor, est beatae obcaecati, quibusdam asperiores aut ducimus sed sint

            voluptate quasi sit provident.

            <a class="read-more" href="#">Read More</a>

        </div>

    </div>

</div>



<style>

    .site {

        max-width: 1170px;

        margin: auto;

        padding: 20px;

        ;

    }



    .review-container {

        display: grid;

        grid-template-columns: 1fr;

        grid-gap: 40px;

    }



    .review {

        padding: 20px;

        padding-bottom: 40px;

        position: relative;

        box-shadow: 0 0 6px rgba(0, 0, 0, .1);

    }



    .read-more {

        padding: 10px 30px;

        position: absolute;

        bottom: 0;

        left: 50%;

        transform: translate(-50%, 50%);

        background: #6f9454;

        color: #fff;

        text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);

        border-radius: 25px;

        border: 1px solid #435f2f;

        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 1px 1px 3px rgba(0, 0, 0, .3);

        text-decoration: none;



    }



    @media all and (min-width: 992px) {

        .review-container {

            grid-template-columns: 1fr 1fr 1fr;

        }



    }

</style>

:2 cents:

Awesome!
https://ryulion.com/layout.htm

machinegunkelly

04-28-2020 11:23 AM

Quote:

Originally Posted by Smack dat (Post 22656114)

Thankyou. Hope it works.

:winkwink:

Smack dat

05-03-2020 06:10 AM

Quote:

Originally Posted by machinegunkelly (Post 22657975)

:winkwink:

Ok, first of all I want to say thanks for this code. It works beautifully in the .php file I made.
I'm just not sure how I would put this into my theme though. Any idea?

machinegunkelly

05-04-2020 01:12 PM

Quote:

Originally Posted by Smack dat (Post 22660810)

Ok, first of all I want to say thanks for this code. It works beautifully in the .php file I made.
I'm just not sure how I would put this into my theme though. Any idea?

it's hard to say,based on exactly 0 information about the theme or system, you will need to edit your theme for sure with my code and it will look something like this. good luck!

Code:

<div class="review-container"> 



    // Start your loop of reviews .. 

    <?php foreach ($reviews as $review) { ?>

        <div class="review">

            <?php echo $review->description; ?>

            <a class="read-more" href="<?php echo $review->link; ?>">Read More</a>

        </div>

    <? } ?> 



</div>

Study existing code to pull the correct values..
And of course, my CSS must be added to your CSS file

As a side note, you may want to remove the 'site' class I used, when using this code, I set a max width to it, that may not match your site, or theme.

Smack dat

05-04-2020 02:26 PM

Quote:

Originally Posted by machinegunkelly (Post 22661679)

it's hard to say,based on exactly 0 information about the theme or system, you will need to edit your theme for sure with my code and it will look something like this. good luck!

Code:

<div class="review-container"> 



    // Start your loop of reviews .. 

    <?php foreach ($reviews as $review) { ?>

        <div class="review">

            <?php echo $review->description; ?>

            <a class="read-more" href="<?php echo $review->link; ?>">Read More</a>

        </div>

    <? } ?> 



</div>

Many thanks!

All times are GMT -7. The time now is 06:15 PM.