I got free html themes with slider revolution. I can't figure it out how to change the height of the slider. Could you please help how to reduce te height of the slider?
Here is the code
<section id="slider" class="slider-element revslider-wrap full-screen clearix">
<div id="rev_slider_10_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="fashion1" style="background-color:transparent;padding:0px;">
<div id="rev_slider_10_1" class="rev_slider" style="display:none;" data-version="5.0.7">
<ul>
<li data-index="rs-36" class="dark" data-transition="fadetoleftfadefromright" data-fstransition="fade" data-slotamount="7" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="Enjoy Nature" data-description="">
<img src="demos/spa/images/slider/1.jpg" style='background-color:#ffffff' alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme rs-parallaxlevel-0" id="slide-36-layer-4" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="full" data-height="full" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="opacity:0;s:1500;e:Power3.easeInOut;" data-transform_out="opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="1000" data-basealign="slide" data-responsive_offset="on" style="z-index: 5; background: rgba(0,0,0,0.2)">
</div>
<div class="tp-caption - " id="slide-35-layer-1" data-x="['right','right','right','right']" data-hoffset="['40','40','40','40']" data-y="['bottom','bottom','bottom','bottom']" data-voffset="['40','40','40','40']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-style_hover="cursor:pointer;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-mask_in="x:0px;y:0px;" data-mask_out="x:inherit;y:inherit;" data-start="500" data-splitin="none" data-splitout="none" data-actions='[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]' data-basealign="slide" data-responsive_offset="off" data-responsive="off" style="z-index: 5; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400;padding:3px 8px 3px 8px;border-style:solid;border-width:1px;border-radius:30px 30px 30px 30px;"><i class="icon-angle-down"></i>
</div>
<div class="tp-caption Fashion-BigDisplay tp-resizeme" id="slide-36-layer-5" data-x="['center','center','center','center']" data-hoffset="['255','231','211','62']" data-y="['middle','middle','middle','middle']" data-voffset="['-30','-18','-48','-28']" data-fontsize="['80','50','50','56']" data-lineheight="['100','50','50','50']" data-width="['none','265','265','265']" data-height="['none','100','100','100']" data-whitespace="['nowrap','normal','normal','normal']" data-transform_idle="o:1;" data-transform_in="x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="x:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="500" data-splitin="none" data-splitout="none" data-basealign="slide" data-responsive_offset="on" style="z-index: 9; white-space: nowrap;">Spa Treatment
</div>
<div class="tp-caption Fashion-TextBlock tp-resizeme" id="slide-36-layer-6" data-x="['center','center','center','center']" data-hoffset="['189','219','200','39']" data-y="['middle','middle','middle','middle']" data-voffset="['120','130','80','110']" data-fontsize="['20','17','17','17']" data-lineheight="['40','30','30','30']" data-width="219" data-height="161" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="x:[-100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="500" data-splitin="none" data-splitout="none" data-basealign="slide" data-responsive_offset="on" style="z-index: 10; min-width: 219px; max-width: 219px; max-width: 161px; max-width: 161px; white-space: normal;"><i class="icon-line-check"></i><br>
<i class="icon-line-check"></i><br>
<i class="icon-line-check"></i><br>
<i class="icon-line-check"></i><br>
</div>
<div class="tp-caption Fashion-SmallText tp-resizeme" id="slide-36-layer-7" data-x="['center','center','center','center']" data-hoffset="['105','130','105','-39']" data-y="['middle','middle','middle','middle']" data-voffset="['-85','-85','-110','-95']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="500" data-splitin="none" data-splitout="none" data-basealign="slide" data-responsive_offset="on" style="z-index: 11; white-space: nowrap;">UNISEX
</div>
<div class="tp-caption Fashion-TextBlock tp-resizeme" id="slide-36-layer-8" data-x="['center','center','center','center']" data-hoffset="['224','254','230','80']" data-y="['middle','middle','middle','middle']" data-voffset="['120','130','79','110']" data-fontsize="['20','17','17','17']" data-lineheight="['40','30','30','30']" data-width="219" data-height="161" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="x:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="500" data-splitin="none" data-splitout="none" data-basealign="slide" data-responsive_offset="on" style="z-index: 12; min-width: 219px; max-width: 219px; max-width: 161px; max-width: 161px; white-space: normal; font-weight: 600;">Body Scrub<br />
Body Wrap<br />
Thai Therapy
Baliness Massage<br />
</div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
</div>
</div>
</section>
I did not try anything. Don't know how to do it
Related
I have this project and I have a list and it contains several points and next to each point there is a right icon, and my problem is that I want to put the icon on the right side, as shown in the picture and not on the left side
index.html:
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<ul style="direction:RTL;" >
<li > <i class="bi bi-check2-all"></i>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li>
</ul>
<p>
الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث.
</p>
Assuming you use an icon font:
Simply using CSS ul { list-style-type: "\icon-hex-code" } the positioning should be handled by the default html document direction mechanism. This will require you to remove the <i> from the <li>, otherwise you will get 2 icons.
By lack of icons I tested this with UNICODE U+2713 (Checkmark) pre/post-fixed with U+00A0 (non breaking space, html ) to get some spacing around the icon. It's color will be equal to the font color of the li, which may be undesired in your case.
When your icon is an SVG you may be able to use list-style-image instead of list-style-type, but I have too little info to go with.
Which icons/file/images do you use for this? E.g. Fontawesome has CSS+iconfont vs. JS+SVG versions to choose from...
Check the snippet
ul {
direction: rtl;
/* \nbsp\checkmark\nbsp */
list-style-type: "\00a0\2713\00a0";
/* replace '2713' with your icon hex code */
}
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<ul>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
</ul>
<p>
الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث.
</p>
You could also apply bootstrap's icons to the ::marker pseudo element to define custom bullet points.
[lang=ar] *,
.rtl * {
direction: rtl;
text-align: right;
}
.ul-check {
padding-inline-start: 1.5em;
}
.ul-check li {
padding-left:0.5em;
}
[lang=ar] .ul-check li {
padding-right:0.5em;
}
.ul-check li::marker {
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -0.125em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f26f";
color: red;
margin-right:-1em;
}
.bi-check2-all::before {
}
.flex{
display:flex;
gap:0.5em;
}
.item{
border:1px solid #ccc;
flex:1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<div lang="ar" xml:lang="ar">
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<div class="flex">
<div class="item">1. flex item</div>
<div class="item">2. flex item</div>
<div class="item">2. flex item</div>
</div>
<ul class="ul-check ">
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
</ul>
</div>
<h2>English text</h2>
<p>This is an English paragraph text. This is an English paragraph text. This is an English paragraph text. </p>
<div class="flex">
<div class="item">1. flex item</div>
<div class="item">2. flex item</div>
<div class="item">2. flex item</div>
</div>
<ul class="ul-check ">
<li>This is an English bullet point text</li>
<li>This is an English bullet point text</li>
<li>This is an English bullet point text</li>
</ul>
In the above example we're using language attributes lang=ar to specify the current section's language.
Now we can add suitable css rules to change text directions:
[lang=ar] *,
.rtl * {
direction: rtl;
text-align: right;
}
I have made multiple sections using a div called .luxxreno and all of them look the same which they should do, however there is one which is slightly miss aligned and isn't aligning, can someone tell me how I can align it and what is causing the issue, the section that is not aligning is called 'kyran, competitive player'.
HTML and CSS
/*PLAYER PAGE*/
.container {
padding: 2.5em 1.25em 0;
margin: 0 auto;
border-bottom: 0.125em solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 1.25em;
}
h1 {
margin: 0;
text-align: center;
font-size: 3.125em;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 1.5625em;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 1.5625em;
font-family: "BatmanForeverAlternate";
padding: 2.5em;
}
.luxxreno {
text-align: center;
width: 100%;
padding-bottom: 1em;
position: relative;
}
.luxxreno img {
border-radius: 50%;
width: 550px;
position: inherit;
bottom: 4em;
}
.meet-the-owner {
padding: 3.125em;
border-top: 0.125em solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
text-align: left;
font-size: 0.9em;
padding-left: 10%;
padding-top: 2em;
}
.questions p {
padding: 0.625em;
padding-left: 0;
font-size: 1.4em;
}
.luxxreno h2 {
font-family: "BatmanForeverAlternate";
left: 0.2em;
font-size: 3em;
top: 1.9em;
padding-bottom: 10px;
}
.status {
font-family: "BatmanForeverAlternate";
left: 0.2em;
font-size: 3em;
top: 1.9em;
padding-bottom: 10px;
}
.owner {
font-family: "BatmanForeverAlternate";
color: red;
padding-bottom: 25px;
font-size: 3em;
}
.luxx-socials {
padding-top: 30px;
}
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br><b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”>
<li>487 # YouTube</li>
</a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”>
<li>2.6k # Instagram</li>
</a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”>
<li>3k # Twitch</li>
</a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”>
<li>2.5k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”>
<li>657k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/avg-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">AVERAGEANT</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Anthony Bryne</b></p>
<p>Online Name: <b>Average Ant</b></p>
<p>First Game Played as a Kid: <b>Modern Warfare 2</b></p>
<p>Game I'm Best At: <b>Call Of Duty Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Mind Reader</b></p>
<p>Favourite Artist of All Time: <b>Lil Tjay</b></p>
<p>Hidden Talents: <b>Best Swimmer on Twitch</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”>
<li>360 # YouTube</li>
</a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”>
<li>193 # Instagram</li>
</a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”>
<li>2.6k # Twitch</li>
</a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”>
<li>142 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”>
<li>23.6k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”>
<li>400 # Twitch</li>
</a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”>
<li>1.2k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”>
<li>1.1k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png" class="luxx-img">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br><b>Honestly don’t want a super power just wanna <br> be Iron Man.</b></p>
<p>Favourite Artist of All Time: <br> <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”>
<li>353 # YouTube</li>
</a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”>
<li>115 # Instagram</li>
</a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”>
<li>2.1k # Twitch</li>
</a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”>
<li>392 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”>
<li>60k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
</section>
I've set up my code using flex so that it works responsively (it's looking how I'd like on devices sub 960 in width so any changes to desktop happen within the css query at the bottom of my CSS file). potentially a very simple question but on views wider than 960 the 8 tiles aren't a consistent width (one .row containing 4 .tiles) - I tried adding a width of 25% which I thought would make them always evenly span the width of the page but that didn't work. Within that the .content (expanding content) seems to extend further that the row to the right which I cant understand?
any ideas would be really appreciated!
working fiddle: https://jsfiddle.net/simoncunningham/zsLxuo26/7/
any advice would appreciated!
<div class="box">
<div class="tile" onclick="openTab('b1');">
<img class="icon-spacing" src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b1" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Banking</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b2');">
<img class="icon-spacing" src="./Icons/RegTech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b2" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>RegTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b3');">
<img class="icon-spacing" src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b3" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>InsurTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b4');">
<img class="icon-spacing" src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b4" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Lending</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="tile" onclick="openTab('b5');">
<img class="icon-spacing" src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b5" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Accounting</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b6');">
<img class="icon-spacing" src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b6" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Payments</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b7');">
<img class="icon-spacing" src="./Icons/Quote.svg" />
<p>Quote</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b7" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Quote</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b8');">
<img class="icon-spacing" src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b8" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>WealthTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
background-color: black;
border: 1px solid grey;
height: 150px;
text-align: center;
font-size: 16px;
color: white;
cursor: pointer;
}
.active-tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
text-align: center;
border: 1px solid #000;
background-color: green;
height: 125px;
cursor: pointer;
}
.content {
order: 1;
flex: 1 0 100%;
/* For visual only */
padding: 20px;
color: white;
text-align: center;
border: 1px solid #000;
background-color: #228b22;
}
.description {
text-align: left;
}
.icon-spacing {
margin-top: 24px;
}
/* Clear floats after the tiles */
.box:after {
content: '';
display: table;
clear: both;
}
.closebtn {
float: right;
color: white;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
.arrow-up {
width: 25px;
height: 25px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*
"Desktop" and above
*/
#media (max-width: 961px) {
.box {
flex-direction: column;
}
.content {
order: 0;
}
}
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('content');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll('.tile');
// Set up a click event handler on each of the tabs
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function (tab) {
tab.classList.remove('active-tile');
tab.children[2].classList.remove('arrow-up');
});
// Set the background of the clicked tab
this.classList.add('active-tile');
tab.children[2].classList.add('arrow-up');
});
});
}
Your problem (when you try width: 25% on tiles) is that 100% is calculated without taking into account the border and the padding.
.tile has a border of 1px, so 25% * 4 + 8 * 1px is more than 100%.
.content has a border of 1px, and a padding of 20px, so 100% + 2 * 1px + 2 * 20px is more than 100%.
To solve the issue you can just change the way your box is calculated by including the border and the padding when you assign the width:
.tile, .content {
box-sizing: border-box;
}
.tile {
width: 25%;
}
You can learn more about box-sizing and its values on the MDN documentation page.
Try add the following to the ".tile" class: flex-basis: 20%;
I have made an image slider using html and css. But the problem is, it's not mobile responsive, it's height and width isn't changing according to mobile screen size. My sample code is below:
<section id="home" class="divider">
<div class="container-fluid p-0">
<!-- START REVOLUTION SLIDER 5.0.7 -->
<div id="rev_slider_home_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="news-gallery34" style="margin:0px auto;background-color:#ffffff;padding:0px;margin-top:0px;margin-bottom:0px;">
<!-- START REVOLUTION SLIDER 5.0.7 fullwidth mode -->
<div id="rev_slider_home" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7">
<ul>
<!-- SLIDE 1 -->
<li data-index="rs-1" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="images/bg/bg12.jpg" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-title="Make an Impact">
<!-- MAIN IMAGE -->
<img src="images/bg/bg12.jpg" alt="" data-bgposition="top 40%" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme rs-parallaxlevel-0"
id="slide-1-layer-1"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
data-width="full"
data-height="full"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
data-start="1000"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 5;background-color:rgba(0, 0, 0, 0.35);border-color:rgba(0, 0, 0, 1.00);">
</div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom" style="height: 5px; background-color: rgba(166, 216, 236, 1.00);"></div>
</div>
</div>
</div>
</section>
Is there any way to make it mobile responsive so that the height and width of the slides fit according to the mobile screen size?
Your best bet would be to remake the image slider using media queries, that way you can copy and paste your preexisting code and adjust it for mobile/tablet devices.
Here is a tutorial going over all you need for a media queries.
CSS media queries
I want to add background video and put image over it in the banner. I have already put it but I can't show the image. I want to add background video in first banner and put image over it.
Here is my link: http://veepal.co.in/veepal_design/
I have tried
<div class="pageWrapper">
<?php include 'header_menu_semi_transperent.php'; ?>
<div class="pageContent">
<div id="rev_slider_4_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="concept1">
<div id="rev_slider_4_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.1.6">
<ul>
<li data-transition="fade" style=" background: url('assets/images/video-banner.png') no-repeat right top;">
<div class="tp-caption tp-resizeme tp-videolayer"
data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
{"delay": "wait", "speed": 300, "to": "opacity: 0"}]'
data-type="video"
data-videomp4="http://veepal.co.in/veepal_design/assets/video/Mock-up.mp4"
data-videowidth="1850"
data-videoheight="900"
data-autoplay="on"
data-nextslideatend="true"
data-forcerewind="on"
data-videoloop="loopandnoslidestop"
data-allowfullscreenvideo="true"
data-x="center"
data-y="center"
data-hoffset="0"
data-voffset="0"
data-basealign="slide">
</div>
</li>
<li data-transition="fade" class="dark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="1500" data-saveperformance="off"><img src="assets/images/sliders/rev/New-banner/1.png" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 1000" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme" id="slide-897-layer-6" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','-15','-15']" data-width="['500','400','300','150']" data-height="2" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power3.easeInOut;" data-transform_out="opacity:0;s:300;s:300;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-start="2000" data-responsive_offset="on" style="z-index: 8;background-color:rgba(255, 255, 255, 0.25);border-color:rgba(0, 0, 0, 0);"></div>
<div class="tp-caption rev-btn " id="slide-12-layer-18" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['top','top','top','bottom']" data-voffset="['450','230','300','230']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:0;e:Linear.easeNone;" data-transform_in="y:[50%];opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1000;e:Power3.easeIn;s:300;e:Power3.easeIn;" data-start="3300" data-splitin="none" data-splitout="none" data-responsive_offset="on" data-responsive="on" style="z-index: 13; font-size: 20px; line-height: 50px; font-weight: 500; color: #fff;background-color:rgba(0, 0, 0, 0.75);padding:0 10px;border-radius:3px;cursor: auto/*margin-top: 130px !important;*/">SEO, SMO, ASO/App Marketing</div><a class="tp-caption main-bg rev-btn " data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','bottom']" data-voffset="['130','110','110','50']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:0;e:Linear.easeNone;" data-style_hover="c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);" data-transform_in="y:[50%];opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1000;e:Power3.easeIn;s:300;e:Power3.easeIn;" data-start="3300" data-splitin="none" data-splitout="none" data-responsive_offset="on" data-responsive="off" style="z-index: 13; font-size: 20px; line-height: 50px; font-weight: 500;padding:0 30px;border-radius:3px;" href="search-engine-optimization">BON VOYAGE</a></li>-->
<li data-transition="fade" class="dark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="1500" data-saveperformance="off"><img src="assets/images/sliders/rev/New-banner/2.png" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 1000" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<li data-transition="fade" class="dark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="1500" data-saveperformance="off"><img src="assets/images/sliders/rev/New-banner/3.png" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 1000" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<li data-transition="fade" class="dark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="1500" data-saveperformance="off"><img src="assets/images/sliders/rev/New-banner/4.png" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 1000" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<li data-transition="fade" class="dark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="1500" data-saveperformance="off"><img src="assets/images/sliders/rev/slider2/2/04.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 1000" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<h2 class="tp-caption uppercase heavy white tp-resizeme" id="slide-1491-layer-10" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-50','-50','-50','-50']" data-fontsize="['70','50','35','25']" data-lineheight="['75','75','35','25']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:300;s:300;" data-start="1500" data-splitin="chars" data-splitout="none" data-basealign="slide" data-responsive_offset="on" data-responsive="on" data-elementdelay="0.03" style="z-index: 8; white-space: nowrap;">CRM & ERP <span class="main-color">Development</span></h2>
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme" id="slide-897-layer-10" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','-15','-15']" data-width="['500','400','300','150']" data-height="2" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power3.easeInOut;" data-transform_out="opacity:0;s:300;s:300;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-start="2000" data-responsive_offset="on" style="z-index: 8;background-color:rgba(255, 255, 255, 0.25);border-color:rgba(0, 0, 0, 0);"></div>
<div class="tp-caption rev-btn " id="slide-12-layer-22" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['top','top','top','bottom']" data-voffset="['450','230','300','230']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:0;e:Linear.easeNone;" data-transform_in="y:[50%];opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1000;e:Power3.easeIn;s:300;e:Power3.easeIn;" data-start="3300" data-splitin="none" data-splitout="none" data-responsive_offset="on" data-responsive="on" style="z-index: 13; font-size: 20px; line-height: 50px; font-weight: 500; color: #fff;background-color:rgba(0, 0, 0, 0.75);padding:0 5px;border-radius:3px;cursor: auto/*margin-top: 130px !important;*/">MS Dynamics CRM, Sage CRM, vTiger CRM, Odoo</div><a class="tp-caption main-bg rev-btn " data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','bottom']" data-voffset="['130','110','110','50']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:0;e:Linear.easeNone;" data-style_hover="c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);" data-transform_in="y:[50%];opacity:0;s:1000;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1000;e:Power3.easeIn;s:300;e:Power3.easeIn;" data-start="3300" data-splitin="none" data-splitout="none" data-responsive_offset="on" data-responsive="off" style="z-index: 13; font-size: 20px; line-height: 50px; font-weight: 500;padding:0 30px;border-radius:3px;" href="enterprise-solutions">BON VOYAGE</a></li>
</ul>
Html
<video controls poster="transparent.png">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
CSS
video {
width:305px;
height:160px;
background:transparent url('poster.jpg') no-repeat 0 0;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
For in detail HTML5 Video and Background Images.
http://www.iandevlin.com/blog/2013/03/html5/html5-video-and-background-images/