Design/CSS suggestions for new design

Author Posts

pringletech May 24, 2023 at 6:28 am

Hello,

I am trying to pull off an idea for a new site design using Gutenberg and microthemer that I had previously created in an outdated theme and BeaverBuilder.

I think I am very close, but I would love some feedback from the microthemer team and power users.

I am very close.

I am missing the clouds at the top of the original site.
My background in the content section is not full width, the vertical (sky) gradient.

My new theme and builder is generatepress and generateblocks.

Dev site: https://clublit.pringletech.com/
live site: https://clubliteracy.com

I have gone round and round with selectors in MT, trying to find the secret sauce. If anyone has some pointers, I would be in your debt.

Thank you, MT community and Sebastian,
Scott

Sebastian May 24, 2023 at 9:18 am

Hey Scott,

Sure I’m happy to help. If you want to make the vertical gradient full width, the simplest approach might be to allow the max-width of the #page element to be full, and the max-width on the child #content element to be 1200px and centred using the following CSS:

#page {
   max-width: 100%;
}
#content {
   max-width: 1200px;
  margin: 0 auto; 
}

But regarding the clouds, where exactly do you want to place them? If you want them on either side of the #content element, I could recommend a solution using CSS grid and ::before and ::after pseudo elements.

If you want them running along the top, in between the header and main content, you could set some padding-top on the #content element and then apply the clouds as a background-image (with repeat-x).

Cheers,
Sebastian

You must login or register to reply to this topic.