Help me create CSS

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. 🙂

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 4 years, 12 months ago by johnzenausa. Reason: switching from grid to flex
• This reply was modified 4 years, 12 months ago by johnzenausa.
• This reply was modified 4 years, 12 months ago by johnzenausa.

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

@mryous Sir;

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