Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 25, 2022 at 2:03 pm #1373868
    dondela

    Dear support,

    i try to achieve a layout like in the first screenshot in privat section. I need a gradient left border – but this seems not to be possible in a color-section. Is there a better way to achieve this? i also tried a background picture but then there is no padding-left to achieve the “box”-style.

    #gradient-border {
	padding: 15px 0px 15px 20px;
	border-left-width: 15px;
	border-left-style: solid;
	border-image: linear-gradient( to bottom, #E95A1A, #6F536B, #142453 ) 1 100%;
	border-right-width: 0;
	margin: 10px;
	
}

    Thanks for any help!

    • This topic was modified 2 years, 1 month ago by dondela.
    November 25, 2022 at 6:21 pm #1373905
    Mike

    Hey dondela,
    Thanks for the login to your site and the screenshot, the issue I see is that the color section is a full width element and you want the left border and the background color to have some padding from the edge, so you could target the inner color section div like this:

    #gradient-border .container {
	background-color: #e3e8ec;
    background-image: url(https://your-site.de/2022/wp-content/uploads/2022/10/gradient-border-colorsection.jpg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    background-attachment: scroll;
}
#gradient-border {
	padding-left: 50px;
}
#gradient-border .content {
	padding: 0px;
}

    I added the ID to your color section and added this css to your quick css, please clear your browser cache and check that this is what you were looking for.

    Best regards,
    Mike

    November 28, 2022 at 10:41 am #1374102
    dondela

    Hey Mike,
    thank you so much for your help, this is it!
    One more question: I would like to make the background-gradient to disapear on mobile- view – is this possible?

    November 28, 2022 at 12:29 pm #1374107
    Yigit

    Hi Dondela!

    Please add following code to Quick CSS as well

    
@media only screen and (max-width: 480px) { 
#top #gradient-border .container {
    background-image: none;
}
}

    Regards,
    Yigit

    November 28, 2022 at 12:36 pm #1374110
    dondela

    Hi Yigit,
    thank you!
    Would it be possible to add a little padding to the left in mobile-view?

    November 28, 2022 at 12:44 pm #1374115
    Yigit

    Hi,

    I edited the code and changed it to following one

    
@media only screen and (max-width: 480px) { 
#top #gradient-border .container {
   background-image: none;
   padding-left: 15px !important;
}
#top #gradient-border { 
   margin: 0;
   padding: 15px 0px 15px 0px;
}
}

    Please review your website :)

    Best regards,
    Yigit

    November 28, 2022 at 1:11 pm #1374129
    dondela

    Thank you Yigit – awesome support!
    :-)

    November 28, 2022 at 1:26 pm #1374134
    Yigit

    Hi,

    You are welcome!

    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘gradient border colorsection’ is closed to new replies.