Hello,
I am trying to create the following with my top 2 sections…where there is a separator and the background image can be seen:
I have tried to create this using negative margins and the z index. And while the section will overlap, the separator stays in place and does not move with the section.
Can you please advise how I can achieve this?
THank you.
I will attach private login so you can see the site.
Hi @KimAnn,
Thanks for reaching out.
Can you please be more specific on the section where you want the overlapping one, which may be marked in the screenshot will help to understand?
On the other hand, the given credentials are not working and show a blank white page, that might be due to different reasons, I would suggest you go through the common issue troubleshoot on this.
1.Theme Related Issue
2.Plugin Conflict
3.Child Theme Related issue
If you discover that an issue is coming from custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
Thanks
@tristup it’s just the wrong login URL…you’ll be fine with this:
https://unicornmagic.love/wp-login.php
There is no issue or conflict.
I need to develop the effect that is in this image. Where the separator takes on the background image it is over.
I followed this thread in an attempt to do this:
While using z index and negative margin for the section works, the separator stays in a fixed position.
If you login to the website you will see what I have in comparison to what i want in the attached image. It should make sense then.
Please advise
Hi @KimAnn,
It seems that you need the banner image bottom portion like V shaped in the image you mentioned. If that is the case, you need to add a square transparent image in V shaped above the banner image.
I have tried to explain how you need to use the transparent image and the banner to get what you want.
Hope it helps.
Thanks
Hello-
this makes no sense to me. Can you explain using the separator in cornerstone please?
Hi @KimAnn,
I have tried to explain the same with a similar kind of image that I have with my local setup in the following video.
https://www.awesomescreenshot.com/video/1415279?key=99ea807d32e3a51f224ff463c0da5fb5
Hope it helps.
Thanks
You are using Pro, I do not have Pro and likely this is why your suggestions didn’t make sense to me. I have x.
Can you please take a look at my site in particular? Or maybe someone else can help advise on this using the X theme?
thank you
Hi @KimAnn,
It’s nothing to do with Pro, I may be using the Pro theme but the Content Builder and Cornerstone are just the same. So what I have shown you in Content Builder that can be done in Cornerstone if you followed the steps explained in the video.
Thanks
I watched the video- it does not show how you get bar 5 to overlap bar which is everything about what i am unable to do
Hi @KimAnn,
I understand your confusion and I have created another video where I used the elements which are common to the Cornerstone, hope now it will clear to you.
https://www.awesomescreenshot.com/video/1422304?key=10aa97301b67e25168089ddfa2d6a3ce
Thanks
Now that I understand what you are saying, this method will not work. I have an image overlapping another image. If you look at my mockup you will see this. This may work if you use a color or just white background but the image will never continuously align with the image below.
I would really like help from someone who understands this better and can help me using the innate cornerstone separator + either z index, CSS or some other method. Again- with 2 overlapping images your method will not work.
Hello @KimAnn,
Please understand that the separator will work best with solid colors. You cannot have alternating sections with background images and expect the separator to work. The separator is not designed for that. It can only work with a section with a solid color just like what I have created on a test page.
See the secure note.
If you are using a section with a background image, regretfully it will not work. This is the limitation of the separator feature.
Thank you for your understanding.
thank you for your reply. I found a way to do it using background images.
In section 2- the part that starts with the text “right now” how can I get this to be mobile friendly?
It looks great with a global container but then I can not enforce a max width for the row if i use a global container. Conversly, without a global container the text in this section runs over and is illegible on mobile.
Look forward to your response.
https://unicornmagic.love
Hi @KimAnn,
Please add the font size using the calc method to make the text responsive. 
Here is documentation of the calc method.
Hope it helps.
Thank you
thank you. i read the link you sent but an unsure how this translates into cornerstone (what/how much goes between the parantheses).
I also dont want to make the font small on mobile- i need a border or some sort of container on mobile.
Hey Kim,
What you need to put between the parenthesis depends on what you need. Please learn from the article linked to by @prakash_s.
If you don’t want the font to get smaller on mobile and instead want some space, you need to set the width correctly. Right now, your Row width is 900px that’s why it’s not responsive.
Set the Width to auto instead and set the Max Width to 900px.
Add a bit of side padding to the Row.
Hope that helps.
Sorry for the deletes- i thought it didn’t work, then realized i needed to reboot cornerstone. Worked great thank you. Sometimes it is something so small lol.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
