[Resolved] Page Layer Affect 2

[troyw]

RE comment #1427269 & #1428161

Thanks Elvin,

I have followed these instructions and while it worked initially in the customiser, once I saved it it stopped working? If I go back into Customiser and change width, it works again, however when check front end it is not there. If I go back into customiser it is gone again. Seems like something is overriding it. Could it be the Child theme? I did try this with no child theme and same thing happens.

Strangely, it seems to be working on the Blog page and the Woocommerce pages, but not Home page? Definitely do not want this affect on other pages. Just the home page.

Also, I would like it to be a box and not the entire page. Below this I want full width content, so this needs to be a box.

Please update host file to 43.250.140.4

Site may show not secure due to ssl but site is there.

[troyw]

Hi team,
Are you still having trouble accessing my development website?

[troyw]

Hey guys,
I could really do with some help. I now have another issue sizing containers on home page too as they are too big and I can’t seem to shrink them. I’m using the Featured Products and would prefer 4 or 5 horizontal squares, but if I set to 25%, they are no longer square?

If my site is causing you problems, please let me know and I will resolve.

Thanks

[Elvin]

Hi,

Please update host file to 43.250.140.4

Is 43.250.140.4 the site IP? If yes, this is what it displays when I try to access it.

Also, I would like it to be a box and not the entire page. Below this I want full width content, so this needs to be a box.

We can try a different approach. One that doesn’t need any coding.:)

I believe we can do this with only GenerateBlocks.

Here’s a demo video on how to do it and how it’ll look.
https://share.getcloudapp.com/RBuOzqE9

What happens here is we basically edit the home page and add container box that has -100px margin-top on the top most of the page. We also add background-color or image if needed.

And since we only edited the home page, it will only apply on the home page.:)

Let us know if this works for you.

[Elvin]

Btw you can ignore my screenshot if this is already solved. Perhaps it was my bad. Maybe I mistyped a few things on my hosts file. 🙂

[troyw]

So can you see the site now?

Your previous instructions worked a treat, thanks so much. How do I get that shadow effect behind the box, like on the Mellow theme?

Also, just want to make those Featured Product containers small enough to fit 4 or 5 square boxes horizontally?

Thanks again.

[Elvin]

So can you see the site now?

I’m not exactly sure of what I should be seeing. I can’t access anything from 43.250.140.4 but I can definitely access the patsmusic dev site.

To clarify, is this the site I’m suppose to see? https://share.getcloudapp.com/04uqdOjy

Regardless, we can still definitely help you out.:)

Your previous instructions worked a treat, thanks so much. How do I get that shadow effect behind the box, like on the Mellow theme?

To add shadow effect, we need a little bit of code.

We can go back to the container box we’ve created and add a “boxed-content” CSS class to it.

After that, we can add a CSS code for the shadow animation.

.boxed-content {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	transition: box-shadow 500ms ease;
}

.boxed-content:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

Here’s a demo video on how to do it.
https://share.getcloudapp.com/WnuJpr8B

Also, just want to make those Featured Product containers small enough to fit 4 or 5 square boxes horizontally?

I’m afraid there’s no way to make a GenerateBlocks container automatically shrink to fit its content’s size. You’ll have set a width to fit your preference.

[troyw]

Perfect! Box shadows works great, thanks.

Still not quite sure why you cannot see the dev website. The one you are seeing is the live website which isn’t WordPress. This is to be replaced with the one I am building.

I will keep messing around with the Features Products section. I know I can just pop a Woocommerce shorcode in [featured_products limit=”4″ columns=”4″], but this is ugly and I would prefer to use your blocks if possible.
If you can think of anyway I can achieve this without the ugly Woocommerce row, please let me know.

Thanks again, I will rinse those Box Shadows now all over the site.:))

[Elvin]

If you can think of anyway I can achieve this without the ugly Woocommerce row, please let me know.

You can add CSS on top WooCommerce’s default CSS to fit your preference. You might wanna visit the WooCommerce documentation website to have an idea how to do that.:)

Thanks again, I will rinse those Box Shadows now all over the site.:))

No problem. Glad to be of any help.:)

[troyw]

I’ll have a look, thanks.

[Author]

Posts