Help me create CSS

thank you sir.. thaank youuuu so muccchhh
the third one sir
Youre great ??

the third sir, tittle and source are in the middle
LINK

Okay. I don’t know where you put the custom css so I’ll just put it here when I’m finished.

Okay for the netpost page here is the css (make sure you don’t remove the shortcode_id= from the shortcode):

#modulehome_wrap .netsposts-block-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 25px;
}
#modulehome_wrap .netsposts-block-wrapper .netsposts-content .inline-post {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
	gap: 25px;
	align-items: center;
}

If you need anything else please let me know. Like on another page. ??

Thank you again sir! got this CSS for that blo0ck

#modulehome_wrap .netsposts-block-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin: 0 25px 0 0;
}
#modulehome_wrap .netsposts-block-wrapper .netsposts-content .inline-post {
    display: grid;
    grid-template-columns: 220px 460px 0px 0px;
    gap: 20px;
    align-items: center;
}
#modulehome_wrap .netsposts-posttitle-link {
    font-family: Montserrat;
    font-size: 20px;
    line-height: 1.3;
}
#modulehome_wrap .netsposts-posttitle-link:hover {
    color: #21409a;
}
#modulehome_wrap .netsposts-source {
    font-size: 13px;
    line-height: 14px;
    color: var(--content-greycolor, #888888);
}
#modulehome_wrap .netsposts-source-link {
    font-size: 13px;
    line-height: 14px;
    color: var(--content-greycolor, #888888);
}
#modulehome_wrap .link-img-wrapper {
    order: 0;
    display: block;
    overflow: hidden;
    border-radius: 4px !important;
    transition: .3s;
}
#modulehome_wrap .link-img-wrapper .post-thumbnail {
    display: block;
    transition: .2s all ease-in-out;
}
#modulehome_wrap .link-img-wrapper:hover .post-thumbnail {
    transform: scale(1.2);
}

currently I’m trying to set the responsive part,
then I’ll try to apply it to other blocks as well ??
You’re the best. I wouldn’t have finished this without you sir!!

Hi @mryous ;

This is for the following css:

#modulehome_wrap .netsposts-block-wrapper .netsposts-content .inline-post

I was looking at your css code and see you changed it to:

grid-template-columns: 220px 460px 0px 0px;

You don’t need 0px just make it look like this:

grid-template-columns: 220px 460px;

plus you said you would like to keep it responsive. Since 460/220 equals 2.09 which is close enough to 2 and to have it automatically responsive when the screen is shrunk you should really have:

grid-template-columns: 1fr 2fr;

and you will see the difference is negligible. Then around 600px it would look better in a single column. So switching over from grid to flex would be your best choice. Just enter the below code below the code you have pasted already:

@media screen and (max-width:600px) {
	#modulehome_wrap .netsposts-block-wrapper .netsposts-content .inline-post {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

With that all said if you’d like you can replace your above code with the code below (I’ve already made the changes for you ?? then you can dismiss all the code I’ve written above and just go with the code below. Remember to replace all your code above :-):

#modulehome_wrap .netsposts-block-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin: 0 25px 0 0;
}
#modulehome_wrap .netsposts-block-wrapper .netsposts-content .inline-post {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: center;
}
#modulehome_wrap .netsposts-posttitle-link {
    font-family: Montserrat;
    font-size: 20px;
    line-height: 1.3;
}
#modulehome_wrap .netsposts-posttitle-link:hover {
    color: #21409a;
}
#modulehome_wrap .netsposts-source {
    font-size: 13px;
    line-height: 14px;
    color: var(--content-greycolor, #888888);
}
#modulehome_wrap .netsposts-source-link {
    font-size: 13px;
    line-height: 14px;
    color: var(--content-greycolor, #888888);
}
#modulehome_wrap .link-img-wrapper {
    order: 0;
    display: block;
    overflow: hidden;
    border-radius: 4px !important;
    transition: .3s;
}
#modulehome_wrap .link-img-wrapper .post-thumbnail {
    display: block;
    transition: .2s all ease-in-out;
}
#modulehome_wrap .link-img-wrapper:hover .post-thumbnail {
    transform: scale(1.2);
}
@media screen and (max-width:600px) {
	#modulehome_wrap .netsposts-block-wrapper .netsposts-content .inline-post {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

• This reply was modified 3 years, 5 months ago by johnzenausa. Reason: switching from grid to flex
• This reply was modified 3 years, 5 months ago by johnzenausa.
• This reply was modified 3 years, 5 months ago by johnzenausa.

You are right sir.., I’ve changed all my code and use yours ??
it’s woooork … except the responsive ??
RESPONSIVE SCREEN
Your code is in the left of the attachment sir, on the right side is what Im tryng to.
.
oh yeah I forgot something sir, do you see the red text on the content in the attachment? It’s a post topic, (class=”gmr-meta-topic heading-text”) the theme author provide it
it would be awesome if your plugin can shows that
Any way.. Still thanks to you sir

• This reply was modified 3 years, 5 months ago by mryous.

Okay give me another day. Just looks squished when too small.

Nevermind sir.. All your help these days, What a thoughtful gift for me. I really appreciate this!
Thanks A Trillion sir!!

@mryous Sir;

Okay glad you’re all set up. Will mark this as resolved.