Yolo Call to Action Bakcground Stripes

This topic is: resolved

This topic has 2 replies, 2 voices, and was last updated 9 years, 9 months ago by Anonymous.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

9 years, 9 months ago #2262

Anonymous

Inactive

Topics: 16
Posts: 133

Hey,

Is there any possible way to remove the orange stripes in the background of the "Yolo Call to Action Element"?

On my personal website it looks like the 2 orange stripes striketrough the text I placed there. Please help me 🙂

If you need a picture, just look at the demo site. Its the same thing there. >>http://demo.yolotheme.com/canifa/home/home-classic/#

I think the stripes are quit stylish, but maybe some visitors wont like it.

9 years, 9 months ago #2266

trinhnv

YoloTeam

Topics: 0
Posts: 148

Hi Marcel,

You can do this:
Go to: {root}/wp-content/themes/yolo-canifa/assets/css/yolo.css
and remove this code:

.yolo-calltoaction .action-left h2:before,
.yolo-calltoaction .action-right h2:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 70px;
  width: 200px;
  height: 1px;
  font-style: italic;
  background-color: #f37259;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}
@media (max-width: 1200px) {
  .yolo-calltoaction .action-left h2:before,
  .yolo-calltoaction .action-right h2:before {
    left: 50px;
    width: 150px;
  }
}
@media (max-width: 992px) {
  .yolo-calltoaction .action-left h2:before,
  .yolo-calltoaction .action-right h2:before {
    top: 20px;
    left: 35px;
    width: 100px;
  }
}
@media (max-width: 768px) {
  .yolo-calltoaction .action-left h2:before,
  .yolo-calltoaction .action-right h2:before {
    top: 15px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 90px;
  }
}