Hello,
I am using the Studio theme. I would like a scalloped border on the bottom of the footer below the email signup like below. Unfortunately, it looked awful in desktop view. I tried a css version and an image version. Which is best practice for responsiveness and how do I create the effect to work on different devices? Thank you so much for any help!
You can try to add this code to Custom CSS of your Theme settings and check again.
Best regards,
Dan from [Ryviu: Reviews App]
.footer {
position: relative;
background: #f47c48; /* your footer background color */
}
.footer::before {
content: "";
position: absolute;
top: -10px; /* height of scallop */
left: 0;
width: 100%;
height: 20px;
background: radial-gradient(circle at 10px 10px, white 10px, transparent 11px) repeat-x;
background-size: 20px 20px;
}```My solution is similar, but a bit simpler and you can easily update color and radius to your liking, or apply some media-queries to have one size for desktop and another for mobile.
And yes, the code can go into “Theme settings”(cog icon)=> “Custom CSS”
footer.footer {
--bg-color: red;
--bg-radius: 15px;
background: radial-gradient(circle at var(--bg-radius) 0,
transparent var(--bg-radius), var(--bg-color) var(--bg-radius));
background-size: calc(var(--bg-radius) *2) 100%;
background-position: top;
}
Thank you so much! Both fixes worked!
Thank you! Awesome!!
