I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
<section class="page-banner Games" style="height:400px;">
<div class="new-banner-collection-page" style="padding-bottom:1rem;">
<div class="row" style="height:100%">
<div class="col-md-7" style="height:100%; float:left">
<div id="tags-new-banner" class="" style="padding-left: 32px;padding-top:17px;">
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/" data-action="{"to Page":"/"}" data-category="clicked bread crumb" style="display: inline;">Home</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/games" data-action="{"to Page":"/search_contents/preview/games"}" data-category="clicked bread crumb" style="display: inline;">Games</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/math-games" data-action="{"to Page":"/search_contents/preview/math-games"}" data-category="clicked bread crumb" style="display: inline;">Math Games</a> >
</span>
<span class="playabe-breadcrum">Counting Games</span>
</div>
<div class="title-new-collection-page" style="">
<h1 style="font-weight:700;">
Counting Games for Kids
</h1>
</div>
<p class="less-banner-content">
<span>The first step to embracing math is learning to count. Children learn to identify, group and classify objects by counting. SplashLearn’s cool online counting games provide respite from the monotony of practice worksheets through colorful virtual manipulatives. Children develop a bond </span>
<span id="js-read-more-banner-btn" onclick="readMoreFunc()" style="color:blue;">... Read more</span>
<span id="js-read-more-banner-content" style="display:none">with numbers that will see them through advanced math in the upcoming years.</span>
</p>
<div class="signup-ctas-new-banner">
<a class="new-banner-signup-link-parent" href="/parents/register#!/parent/creation">
<button class="new-banner-signup-btn-parent">Parents, Sign Up for Free</button>
</a>
<a class="new-banner-signup-link-teacher" href="/teachers/register">
<button class="new-banner-signup-btn-teacher">Teachers, Use for Free</button>
</a>
</div>
</div>
<div class="new-banner-images col-md-5" style="float:right">
<img alt="Imge" class="" style="max-width: 100%; width: 100%;height: 100%;object-fit: contain;" src="http://localhost:8300/cms_assets/images/Common-page.jpg">
</div>
</div>
</div>
</section>
I implemented a service booking form using contact form 7. How can I prevent unselected fields from being sent to the customer's email? My form is as follows:
<div class="row">
<div class="col-sm-4">
<span style="padding-bottom: 2em;"></span>
<span class="products">test 1</span>
</div>
<div class="col-sm-2">
<div class="qty-count qty-count--order">
<span class="count-reduce">–</span>
[text text-195 class:count-input "0"]
<span class="count-add">+</span>
</div>
</div>
<div class="col-sm-4">
<span style="padding-bottom: 2em;"></span>
<span class="products"> test 2</span>
</div>
<div class="col-sm-2">
<div class="qty-count qty-count--order">
<span class="count-reduce">–</span>
[text text-349 class:count-input "0"]
<span class="count-add">+</span>
</div>
</div>
</div>
config email:
test1: [text-195]
test2: [text-349]
You should add a star(*) after input.something like this:
[text* text-349 class:count-input "0"]
I am trying to style the post in the loop in alternate styling using Custom Content Short code plugin. Some what like this.
Example image of post styling using bootstrap col-offset
This is what i'm trying
<?php start_short(); ?>
[loop type=service orderby=date order=ASC]
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
[/loop]
<?php end_short(); ?>
What I want to display is:
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
How can I achieve this?
The above code was generating a loop of post in WordPress with single class of col-md-offset-7 to every post.
What I did was use jQuery even function to delete class from alternate post.
$("div.service-post:even").removeClass("col-md-offset-7");
Why does my .container main_container div hang on the header? (Its not because the 2 php error message, i tried)
If i give the div about 100px margin-top, it will be okay, but that isn't a good method.
After the header, I added a clearfix div, but it did nothing.
Fiddle
<nav class="navbar navbar-default navbar-fixed-top mainHeader">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo $host; ?>"><?php echo $siteName; ?></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<?php
$top_menuDown = mysqli_query($kapcs, "SELECT * FROM top_menu WHERE top_menu_id IN (1,3,4,5,6,7) ORDER BY top_menu_sorrend ASC");
if(mysqli_num_rows($top_menuDown) > 0 )
{
while($top_nav = mysqli_fetch_assoc($top_menuDown))
{
echo '<li><a class="top_menu_to_link" href="'.$host.'/'.$top_nav['top_menu_seo'].'" title="'.$top_nav['top_menu_nev'].'">'.$top_nav['top_menu_nev'].'</a></li>';
}
}
?>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
This is because you use navbar-fixed-top class in your navbar. That's a Bootstrap class which makes your navbar position: fixed in CSS. Therefore you have to add margin-top or padding-top to your main_container. Clearfix has nothing to do with your issue in this case. When you use position: fixed browser get this element out of the normal document flow.
position: absolute/fixed:
The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
You have to use padding-top/margin-top to the body element. The reason is explained by #makshh. So just try to customize it based on screen size using Javascript.
Updated Fiddle
Here is an example--
$(window).resize(function() {
if ($(".navbar.navbar-default.navbar-fixed-top.mainHeader").height() > 100) {
$("html, body").css("padding-top", "150px");
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Főoldal</title>
<body style="padding-top:100px;">
<nav class="navbar navbar-default navbar-fixed-top mainHeader">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://kemenyem.hu">Nemzeti Reptéri Parkoló</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="top_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/erdekessegek" title="Hírek, érdekességek">Hírek, érdekességek</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a></li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
<div class="container main_container">
<div class="homepage_slideshow hidden-xs">
<div class="home-slider-wrapper hidden-xs">
<ul class="bxslider">
<li><img src="https://kemenyem.hu/images/homepage_slideshow/93-3.jpg" title="Teszt kép 1" alt="Teszt kép 1" /></li>
<li><img src="https://kemenyem.hu/images/homepage_slideshow/393-1.jpg" title="Teszt kép 2" alt="Teszt kép 2" /></li>
</ul>
</div>
</div>
<!--Slider end-->
<div class="col-md-9 left_side">
<div class="left_title_div">
<h3 class="left_title">Parkolóhely foglalás online</h3>
</div>
<div class="content">
<h3><strong>A megrendelés, árajánlatkérés menete</strong></h3>
<p>Amennyiben árajánlatot szeretne kérni, azt a termékeknél a "Még jobb árat szeretnék" gombra, vagy a menüben az "Ajánlatkérés" menüpontra
való kattintással teheti meg.</p>
<p>A megjelenő ajánlatkérő ablakban / oldalon kérjük töltse ki az összes mezőt, és küldje el részünkre.</p>
<p>Munkatársaink 2 munkanapon belül felveszik Önnel a kapcsolatot az Ön által megadott elérhetőségek valamelyikén.</p>
<h3><strong>Fizetés</strong></h3>
<p>Megrendelését előre utalással, vagy személyesen valamelyik telephelyünkön készpénzzel tudja fizetni. A budapesti telephelyünkön lehetőség van bankkártyás fizetésre
is.</p>
<h3><strong>Szállítás</strong></h3>
<p>A részletes szállítási információkat megtekintheti a "Szállítás" menüpontban.</p>
<h3><strong>Árak</strong></h3>
<p>A weboldalon feltüntetett árak gyári árak, tartalmazzák a 27% ÁFÁ-t, de nem tartalmazzák a raklapok díját, a szállítást, és a lerakást.</p>
</div>
<div class="left_title_div">
<h3 class="left_title">Legfrissebb hírek</h3>
</div>
<div class="news_box news_list">
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_remy-metailler-hafjell_147-82712.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Jobb lett az instant futtatás az új Android Studio 2.3-ban">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Jobb lett az instant futtatás az új Android Studio 2.3-ban</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
<p class="main_hir_box_desc">A Google a napokban új kiadást jelentett be integrált mobilos fejlesztőkörnyezetéből. Az új Android Studio 2.3 sok stabilitási fejlesztés mellett néhány érdekes funkcionális fejlesztést is hoz, amik az app-ok tervezését, tesztelését és a bennük
történő hibakeresést egyaránt segítik majd.</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/thumb_ne-style-001-2532861600.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
<p class="main_hir_box_desc">A bemutató feltételezi, hogy a gépeden már fel van telepítve a PHP, az SQL Server Express kiadása, valamint a Microsoft SQL Server meghajtói a PHP-hez és a Git verziókezelő is. A cikk során a következőket fogjuk megtanulni:</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_s1600_0815_km_01-12894.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:25</span>
<p class="main_hir_box_desc">A Microsoft a hét elején Visual Studio blogjában egy olyan, általa poszternek hívott dokumentumot tett közzé, amelyben múlt héten bemutatott új integrált fejlesztői környezete legfontosabb újdonságait mutatja be. A máshol csak infografikának
hívott összeállításban az általános, produktivitást javító fejlesztések mellett unit-tesztelést segítő újdonságok, sőt, a C++, a C# és az ASP.NET újdonságai is említésre kerülnek.</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_p-dsc04186-81966.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Új korszakot nyit a most elkészült LLVM és a Clang 4.0">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Új korszakot nyit a most elkészült LLVM és a Clang 4.0</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:24</span>
<p class="main_hir_box_desc">Az LLVM fejlesztői a napokban "final" jelöléssel látták el az LLVM és a Clang következő, 4-es verzióját. Bár a hivatalos bejelentés és a csomagok közzétételére vélhetően csak ezen a héten kerül majd sor, a fordító-infrastruktúra
és a hozzá kapcsolódó C/C++ fordító legújabb kiadása ezzel elkészültnek tekinthető.</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 right_side">
<div class="left_title_div">
<h3 class="left_title">Hírlevél</h3>
</div>
<div class="sidebar_data_div">
<div class="sidebar_data">
<p class="sidebar_text">Iratkozzon fel hírlevelünkre, hogy mindíg értesüljön az újdonsgokról, friss hírekről.</p>
<form action="files/newsletter.php" method="post" id="SidebarNewsletterForm">
<input type="text" id="newsletterName" name="NewsletterName" placeholder="Az Ön neve" class="form-control sidebar_input">
<input type="text" id="NewsletterEmail" name="NewsletterEmail" placeholder="E-mail címe" class="form-control sidebar_input">
<button type="button" id="NewsletterButton" name="NewsletterButton" class="sidebar_button"><i class="fa fa-envelope-o" aria-hidden="true"></i> Feliratkozás</button>
</form>
</div>
</div>
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-links">
<a class="footer_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a><a class="footer_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a><a class="footer_menu_to_link" href="https://kemenyem.hu/erdekessegek"
title="Hírek, érdekességek">Hírek, érdekességek</a><a class="footer_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a><a class="footer_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a>
<a
class="footer_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a>
</p>
<p class="footer-company-name">2017 <br />
<b>Notice</b>: Undefined index: k_nev in <b>/home/grashu/public_html/kemenyem.hu/files/footer.php</b> on line <b>15</b><br /> © - Minden jog fentartva!</p>
</footer>
<div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Bezárás</span></button>
<h4 class="modal-title" id="myModalLabel">Értesítés</h4>
</div>
<div class="modal-body">
<p id="newsletterResult"></p>
</div>
</div>
</div>
</div>
<i class="fa fa-chevron-up scrollToTopIcon" aria-hidden="true"></i></body>
Hope this helps!
I have been asked to get the span.vatText which has the text incl. VAT.
<ul class="products" data-role="listview" data-theme="d">
<li class="product" data-productid="1504x2-Rung-Superior-Multi-Purpose-Ladder">
<a href="/product/1504x2-Rung-Superior-Multi-Purpose-Ladder" class="hasThumb">
<div class="thumb">
<img src="http://www.blah.co.uk/acatalog/4x2.jpg" alt="blah" />
</div>
<h2 class="wrappable">Products name</h2>
<p class="price">
<span class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="GBP" />
<span class="priceExclVat">
<span class="priceOriginal">£133.32</span>
<strong class="priceSale">£49.99</strong>
<span class="vatText">excl. VAT</span>
</span>
<span>
<span class="priceOriginal">£159.99</span>
<strong class="priceSale" itemprop="price">£59.99</strong>
<span class="vatText">incl. VAT</span>
</span>
</span>
</p>
</a>
</li>
I have tried using the pseudo code such has nth-child and nth-of-type but these don't seem to work. I was just wondering how I can obtain just the last .vatText. Thank you for any help which you can provide
Use last-child pseudo attribute to achieve what you are looking for.