Recent
Categories
View Replies (3)

Everly Homepage Curved Design Below Slideshow

  1. Issue
0
Votes
Undo
  1. smithjd44
    smithjd44
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 01 August 2020
  5.  Subscribe via email
I am building a couple of websites using your Everly template.

The problem is I want to use a different slideshow extension rather than the included J51 Layer Slideshow.

I have attached two screen shots of websites using the Layer Slideshow and the other with another slideshow extension.

The curved section below the slideshow is what makes the Everly template unique but when I use another slideshow extension, that curved section is hidden.

The reason I am wanting to use another extension is the ability to add text anywhere and for that text to be also be displayed on mobile devices in the same manner.

I am using the Creative Slider for the http://tempdomain49.site and that website is not displaying the curved section below the slideshow.

If there is CSS code that would restore the curved section below the slideshow on the http://tempdomain49.site as it appears on http://tempdomain45.site, I would love to have that coding.

Thank you as always!

James
Attachments (2)
header-image.PNG header-image.PNG
header-image2.PNG header-image2.PNG
References
  1. http://tempdomain45.site
  2. http://tempdomain49.site
Responses (3)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi James

To apply the same CSS to just desktops, try replacing with the following...

@media only screen and (min-width: 1080px) {

	#container_showcase1_modules + .content_main {

    z-index: 50;

	}

	.showcase_seperator {

	    z-index: 40;

	}

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
smithjd44
smithjd44
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
When I add the CSS code you provided, it worked great on the desktop view but the mobile view was cut off.

Is there a way to apply the CSS code to only the desktop view and not apply to the mobile view?

I have attached some screenshots of both the desktop and mobile view for the Prove Jesus website with and without the additional CSS.

I have the CSS code added for the http://tempdomain49.site allowing the desktop view to have the curved area below the slideshow but with the CSS code, it also cuts off the slideshow in the mobile view.

Thanks again for all of your assistance!

James
Attachments (4)
header-image2.PNG header-image2.PNG
prove_jesus_mobile_view.PNG prove_jesus_mobile_view.PNG
prove_jesus_mobile_view_without_CSS.PNG prove_jesus_mobile_view_without_CSS.PNG
desktop_view_with_added_css_code.PNG desktop_view_with_added_css_code.PNG
References
  1. http://tempdomain49.site
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi James

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

#container_showcase1_modules + .content_main {

    z-index: 50;

}

.showcase_seperator {

    z-index: 40;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.