Keyword
Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

change width of slides in header

  • JOsh
  • JOsh's Avatar Topic Author
  • Visitor
4 years 10 months ago #138853 by JOsh
JOsh created the topic: change width of slides in header
Hello, Have looked thro older posts but cant find the answer.
Where in the template.css or index can I change the width of the slide show in the top header area?

Thanks
Joe

Please Log in or Create an account to join the conversation.

More
4 years 10 months ago - 4 years 10 months ago #138854 by Krikor Boghossian
Krikor Boghossian replied the topic: change width of slides in header
.slideshow .itemsWrapper { max-width: 1100px; margin: 0 auto; }
.slideshow .itemsWrapper ul.items li .row { left: auto!important; }

This snippet will do the trick.
Do not forget to paste it in your custom.css file to ensure smooth updates.

You can of course increase or decrease the 1100px maximum width.

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

Please Log in or Create an account to join the conversation.

  • JOsh
  • JOsh's Avatar Topic Author
  • Visitor
4 years 10 months ago #138855 by JOsh
JOsh replied the topic: change width of slides in header
can i do the same by just changing same snippet to height?

Thanks

Please Log in or Create an account to join the conversation.

  • JOsh
  • JOsh's Avatar Topic Author
  • Visitor
4 years 10 months ago #138856 by JOsh
JOsh replied the topic: change width of slides in header
Hello again,

able to use that to adjust the height which is what I meant to say.
However on any mobile phone it leaves a large white gap underneath.
Is there a way or code to use to adjust for mobile phone?

Please Log in or Create an account to join the conversation.

More
4 years 9 months ago #138857 by Krikor Boghossian
Krikor Boghossian replied the topic: change width of slides in header
.slideshow .itemsWrapper { height: 380px; } 
.slideshow .itemsWrapper ul.items li .row { bottom: 65% }.slideshow div.nuSliderPagination { bottom: 24% }
.isFrontpage .mainHeader { max-height: 380px; }
@media only screen and (max-width: 600px),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width : 600px),
only screen and (-o-min-device-pixel-ratio: 3/2) and (max-width : 600px),
only screen and (min-device-pixel-ratio: 1.5) and (max-width : 600px) {
.slideshow .itemsWrapper ul.items li .row { bottom: 28%; }
}

This will shorten it by 200px on all viewports and will adjust smoothly on mobile devices as well;

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

Please Log in or Create an account to join the conversation.

  • JOsh
  • JOsh's Avatar Topic Author
  • Visitor
4 years 9 months ago - 4 years 9 months ago #138858 by JOsh
JOsh replied the topic: change width of slides in header
Hello, it now adjusts fine on mobile but on a normal pc now the sliding text goes too high, its cutting off at the top of the screen
should I adjust the height in this css code ? make this 380 as well?
/* Slideshow */
.slideshow {position:absolute;width:100%;}
.slideshow .itemsWrapper {height:580px;max-height:580px;overflow:hidden;}
.slideshow .itemsWrapper ul.items li .moduleItemImage {display:block;max-height:580px;position:relative;}
.slideshow .itemsWrapper ul.items li .moduleItemImage img {width:100%;margin-top:-10%; /* According to the main theme of your photos, you can change the negative percent of the margin-top. */}
.slideshow .itemsWrapper ul.items li .row {width:100%;max-width:1096px;margin:0 auto;position:absolute;bottom:32%;z-index:210;}
.slideshow .itemsWrapper ul.items li .moduleItemExtraFields,
.slideshow .itemsWrapper ul.items li .moduleItemContent {font-family:'Titillium Web', serif;float:right;padding:0 15px 0 0;text-align:right;text-shadow:0 1px 1px rgba(0,0,0,0.33);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.slideshow .itemsWrapper ul.items li .moduleItemExtraFields h2,
.slideshow .itemsWrapper ul.items li .moduleItemContent a.moduleItemTitle {max-width:700px;background:rgba(243, 235, 1, 0.9);margin:0 0 10px;font-size:45px;letter-spacing:-1px;font-weight:400;line-height:1em;display:inline-block;padding:8px 20px;}
.slideshow .itemsWrapper ul.items li .moduleItemExtraFields .tagline {margin-left:10px;max-width:700px;background:rgba(0, 0, 0, 0.7);color:#f3eb01;padding:8px 20px;display:inline-block;}
.slideshow .itemsWrapper ul.items li .moduleItemExtraFields p,
.slideshow .itemsWrapper ul.items li .moduleItemContent div.moduleItemIntrotext {margin:0;font-size:25px;font-weight:200;line-height:1em;}
.slideshow div.nuSliderPagination {width:100%;max-width:1096px;margin:0 auto;position:absolute;bottom:18%;z-index:210;}
.slideshow div.nuSliderPagination ul {float:right;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:0 10px 0 0;}

Please Log in or Create an account to join the conversation.

  • JOsh
  • JOsh's Avatar Topic Author
  • Visitor
4 years 9 months ago #138859 by JOsh
JOsh replied the topic: change width of slides in header
thanks its looking good now. Or at least until I break it again

Please Log in or Create an account to join the conversation.

More
4 years 9 months ago #138860 by Krikor Boghossian
Krikor Boghossian replied the topic: change width of slides in header
No worries, we 'll fix it again.

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum