Canvas Support

Make swiper slider full size on small screens

4 replies · opened Dec 10, 2019

JjyounusDec 10, 2019

Hey there,

I'm using the one-page template and basically removed everything, except the logo, swipe slider, and footer.
The swipe slider has about 5 slides, with some background image, a title text (h2) and a short paragraph of text (h1).

It looks fine on a desktop with a full screen browser window. If I now start to resize the Chrome browser window, it will change the design slightly (due to this being a responsive website). Problem is, at the first "responsive change" (about tablet size I think), I now see the header with background colour, as well as a menu button. How can I remove the header + menu button but keep the logo. Tapping on the menu button btw does nothing, as I have removed all the nav bar items.

If I now resize the browser window more (about the size of a large phone), the problem is that the slider height is now fixed. It doesn't use the full height of the window any more. How can I change this?

If I resize the browser window one more time (about the size of a small phone), the problem is that the slides now only show the title text (h2) and not the short paragraph underneath it (h1). The height of the slider shrinks further btw, and it might be related.

To summarise:

  1. How can I remove the menu button + make the header/nav bar transparent when resizing the browser window and making it smaller?
  2. How can I stop the swipe slider from using a fixed height when resizing the browser window, and keep using the full height of the viewport?

Can you please point me to the right files that I need to edit and ideally which css classes? I'm a newbie when it comes to web dev, so any help is greatly appreciated.

SSemicolon WebSTAFFDec 12, 2019

Hello,

Can you please provide us with a Live URL or the name of Template you are trying to edit so that we can provide you with more accurate codes for this. Thanks for your Patience.

Meanwhile, regarding your Queries:

  1. You can use the following CSS Code to make the Header Transparent on Mobile Devices:
@media (max-width: 991.98px) {
	.dark #header.transparent-header,
	.dark #header.semi-transparent,
	#header.dark.transparent-header,
	#header.dark.semi-transparent,
	.dark #header.transparent-header #header-wrap,
	.dark #header.semi-transparent #header-wrap,
	#header.dark.transparent-header #header-wrap,
	#header.dark.semi-transparent #header-wrap,
	#header.transparent-header.dark:not(.sticky-header) #header-wrap {
		background-color: transparent;
	}

	#header.transparent-header + #slider,
	#header.transparent-header + #page-title.page-title-parallax,
	#header.transparent-header + #google-map,
	#slider + #header.transparent-header {
		top: -70px !important;
		margin-bottom: -70px !important;
	}
}

and then you cam simply delete the #primary-menu-trigger Element from the HTML Page to remove the Menu Hamburger Icon.

  1. Simply add the .force-full-screen Class to the .slider-element DIV. This will make the Slider Full Screen on the Mobile Devices as well.

Hope this helps.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

JjyounusDec 13, 2019

This is perfect, thank you very much. I was able to get it working with your help.

I'm modifying the index.html file directly, because that was the sort of template I liked the best.

One last question I need help with please. On the smallest device size, the swiper slider description text is still hidden, even though force-full-screen is being used. How can this be changed, so that I see the full text.

The code is something like this:


  
    
      
        
          Title.
          

          Some description here.
        
...

Basically the h1 text isn't being shown on the smallest window size. It does show fine on all other sizes.

JjyounusDec 13, 2019

Okay, figured it out. I deleted the two class tags "d-none d-sm-block" and now I can see it even on the smallest screen size.

Thank you for your help!

SSemicolon WebSTAFFDec 15, 2019

Hello,

Glad that your issues were resolved. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard