[newskywebsitesParticipant]

Okay, here’s one for you.. I’m trying to recreate this Wix site in X theme: http://www.vitalandgreen.com/

Notice the rounded corners on the graphics/boxes. How would you recommend creating these in Cornerstone? I don’t want a slider on the home page, just going to use one large image and the text on brown on the right and need to create all 4 service boxes with the green background.

Here is the site so far: http://vitalgreen.newskywebsites.com/ (using latest version of WP, X, Cornerstone, Renew stack with Child theme).

Not sure how to get the large top graphic so the image and brown text box are same height on any screen size… tried “flexmethod” but that didn’t do the trick.

And on the 4 green service boxes, I added border-radius: 10px; to the column, but that rounds the bottom of the photo too. I need to only round that on two sides…?

See screenshots.

Thanks so much!
dawn

[newskywebsitesParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please enable ‘Marginless columns’ option for section #1 to have equal columns.
Change column and image’s inline CSS to border-radius: 0 0 10px 10px;.

Hope it helps.

[newskywebsitesParticipant]

Thank you! The radius trick worked, but the first large image is still not forcing to same height for image and brown box. See video here: http://screencast-o-matic.com/watch/cbVl0iQCcb

Not sure how to get the large top graphic so the image and brown text box are same height on any screen size… tried “flexmethod” but that didn’t do the trick.

I’m hoping to avoid using a slider if possible…? But it has to be responsive…

Thanks!
Dawn

[Rue NelModerator]

Hello There,

Thanks for updating in! Your flexmethod will not work because there was no code that supports that class. To resolve your issue, you can make use of this code instead:

.flexmethod .x-column > img{
    visibility: hidden;
}

.flexmethod .x-column:first-child,
.flexmethod .x-column:nth-child(1) {
    background-image: url(http://vitalgreen.newskywebsites.com/wp-content/uploads/2017/01/Lawn-Care-Home-Graphic.jpg);
    background-size: cover;
    background-position: top right;
}

We would loved to know if this has work for you. Thank you.

[newskywebsitesParticipant]

You did it!! Thank you!! If anyone is following this, I just had to change the other “flexmethod” class to “flexmethod2” for instances where I didn’t want this new code applied. Worked like a charm.

One last tweak… Is there a way to make this row or section wrap to 2 rows earlier? For example, when the screen is around tablet size, it looks weird because the brown box is so long and narrow.

See attached screenshot.

Thanks so much!
dawn

[JoaoModerator]

Hi There,

Try adding the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 969px ) {
#x-section-1 .x-section .x-container.marginless-columns .x-column.x-1-3 {
    width: 33.33333%;
    width: 100%;
} }

Let us know how it goes,

Joao

[newskywebsitesParticipant]

I’m afraid that did not change anything. 🙁

[FriechModerator]

Hi There,

Add this code instead.

@media (max-width: 979px) {
	.flexmethod .x-column.x-sm {
		display: block !important;
		width: 100% !important;
	}
}

Hope it helps, Cheers!

[newskywebsitesParticipant]

Absolutely perfect! Thank so much!
Dawn

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts