[Resolved] Making an element a grid

[johnaps]

Hello i am trying to make the author box on the bottom of my posts pages a grid to control its elements but i can never manage grid… :/

I am trying to achieve a layout like this

View post on imgur.com

Currently mine is like this

View post on imgur.com

.authorboxlast.saboxplugin-wrap {
	display: grid;
	grid-template-columns: 100px 150px;
  grid-gap: 10px;
  grid-template-rows: auto;
  grid-template-areas: 
    "a b"
		"a c";
  align-items: start;
}
.authorboxlast.saboxplugin-authorname {
	display: grid;
	grid-area: a;
	grid-column-start: 1;
}
.authorboxlast.saboxplugin-desc {
	display: grid;
	grid-area: b;
	grid-column-start: 2;
}
.authorboxlast.saboxplugin-socials {
	display: grid;
	grid-area: c;
}

Could you point anything to me?? 🙏

[Leo]

Hi there,

Have you checked with the plugin support for this?

We really have to mindful on how much custom help we provide for questions unrelated to GP.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

Yep, they only offer support on premium members unfortunately, and i wouldnt mind paying for premium if i needed any of the premium features!
Its ok though i understand, i ll find a way in some manner… Thank you very very much!!!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

Thought I might mention that a forum like this might be what you need a lot of times for questions not related to GP:
https://wordpress.stackexchange.com/

Lots of cool solutions and good minds on there.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

Not very friendly to noobs like me 😛 but thank you, should i try it for this you think?

[Leo]

There are all skill levels of people on there. We find a lot of our answers there as well.

Worth a shot for a lot of your questions I think.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

Thank you 🙏 Leo!!!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

i was so close the first time i ended up founding it myself 🙂

.authorboxlast .saboxplugin-wrap {
	display: grid;
	background-color: #f7f7f7!important;
	grid-template-columns: 230px auto auto;
  grid-gap: 10px;
  grid-template-rows: auto;
  grid-template-areas: 
    "a b"
		"a c"
		"a d";
  align-items: start;
}
.authorboxlast .saboxplugin-gravatar {
	display: grid;
	grid-area: a;
	grid-column-start: 1;
}
.authorboxlast .saboxplugin-authorname {
	display: grid;
	grid-area: b;
	grid-column-start: 2;
}
.authorboxlast .saboxplugin-authorname:before {
	content: 'Το άρθρο γράφτηκε από:';
	font-size: 13px;
line-height: 22px;
text-align: left;
font-weight: 400;
	color: #333;
	padding-left: 2px;
}
.authorboxlast .saboxplugin-desc {
	display: grid;
	grid-area: c;
}
.authorboxlast .saboxplugin-socials {
	display: inline-block;
	grid-area: d;
	background-color: #f7f7f7!important;
}
.authorboxlast .saboxplugin-wrap .saboxplugin-gravatar img {
	max-width: 220px;
	border-radius: 0%;
}

Thank you Leo for believing in me :P!!

[Leo]

That’s awesome!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts