I have a section on my site container-fluid,row, with two equal col-md-4 sections. the right section has image, the left has header and paragraph on the next row it switches image on the left and header/paragraph on right and so on for six sections. I am trying to re order for mobile where the image is above the header / P on every section. I have tried using order-sm-1 and order-sm-2 on the divs but not having luck. it is just changing the order on all breakpoints. here is first section.....
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="col-md-4">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="col-md-4 mr-5 text-center"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
I don't think there is a order-sm-* class similar to how col-sm-* has been changed to col-* so I believe the answer would be to do:
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="order-2 order-md-1 col-md-4">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="order-1 order-md-2 col-md-4 mr-5 text-center"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="col-md-4 order-2 order-md-0">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="col-md-4 mr-5 text-center order-1 order-md-0"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
Anything smaller than medium (xs & sm) will have image at top as its order is set to 1 and the other div has order 2. In med+ the orders are 0, they are small value so will be order normally.
Related
This is my variable have HTML code fetched from database, for example:
const z =
"<section class="vh-100" style="background-color: #5f59f7;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card mb-5" style="border-radius: 15px;">
<div class="card-body p-4">
<h3 class="mb-3">Program Title</h3>"
I need to show it as a navbar in my page not as a code. How to show this in my page?
You can do something like this
HTML
<div id='output'></div>
JS
const z = '<p>hello</p><input /><p>goodbye</p>'
document.querySelector('#output').innerHTML = z
View it live here on codepen
I trying to use radio-button for showing contents and hide others depending on selected radio. What is going on is everything works fine, as each radio button show its content the only issue is that the radio-button not showing that is selected.
Html code:
<div class="col-12">
<div class="row">
<div class="col-xl-3 col-sm-6">
<div class="card radius-10 border-start border-0 border-3 border-info">
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<p class="mb-0 text-secondary" style="padding-bottom: 5px;">Payments</p>
<div class="custom-radio mr-3">
<input type="radio" id="radio_1" name="paymentradi">
<label class="radio_wrap" data-radio="radio_1"></label>
</div>
</div>
<div class="widgets-icons-2 rounded-circle bg-gradient-scooter text-white ms-auto"><i class="icofont-dollar"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card radius-10 border-start border-0 border-3 border-danger">
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<p class="mb-0 text-secondary" style="padding-bottom: 5px;">Ads</p>
<div class="custom-radio mr-3">
<input type="radio" id="radio_2" name="adsradi">
<label class="radio_wrap" data-radio="radio_2"></label>
</div>
</div>
<div class="widgets-icons-2 rounded-circle bg-gradient-bloody text-white ms-auto"><i class="icofont-megaphone"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="content">
<div class="radio_content radio_1">
<p>1</p>
</div>
<div class="radio_content radio_2">
<p>2</p>
</div>
</div>
</div>
</div>
The javascript code:
$(document).ready(function(){
/* by default hide all radio_content div elements except first element */
$(".content .radio_content").hide();
/* when any radio element is clicked, Get the attribute value of that clicked radio element and show the radio_content div element which matches the attribute value and hide the remaining tab content div elements */
$(".radio_wrap").click(function(){
var current_raido = $(this).attr("data-radio");
$(".content .radio_content").hide();
$("."+current_raido).show();
})
});
I had also create short screen record video it may explain more the situation:
https://www.youtube.com/watch?v=MqM2jvqI29I&ab_channel=MohamadSimo
I'm using JavaScript to change the price value of the div based on the selected div, the price is already defined in the div, if I click on any div it should updated the value in the another div as well. so far I have try below code but it doesn't work, it changes the value of only first div. if I click on another div it repeats the same price value.
Here's the code I have tried so far!
let pricebox = document.getElementById('pricingdata');
const totalprice = document.querySelector("#totalprice");
pricebox.addEventListener('click', function(e) {
let mainprice = document.getElementById("pricecad").innerHTML;
console.log(mainprice);
totalprice.innerHTML = '$' + mainprice;
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
This code should work. Click Run code snippet and check the result.
const totalprice = document.querySelector("#totalprice");
const priceboxes = document.querySelectorAll('.pricing-box-cad');
for (var i = 0; i < priceboxes.length; i++) {
priceboxes[i].onclick = (e) => {
const mainprice = e.currentTarget.querySelector('.pricecad').innerText;
totalprice.innerText = '$' + mainprice;
}
}
<div class="row text-center pricing-box">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
remove all id="pricecad" as polyglot wrote, ids must be unique
you are looking for event delegation, replace your code by:
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
if (!e.target.matches('span.display-5')) return // ignore clicks else where
totalprice.textContent = '$' + e.target.textContent;
});
for click on every .pricing-box-cad' elements do
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
let pricingBox = e.target
while (!pricingBox.matches('div.pricing-box-cad'))
{
if (!pricingBox.parentElement) break
pricingBox = pricingBox.parentElement
}
if (!pricingBox.matches('div.pricing-box-cad')) return // ignore clicks else where
totalprice.textContent = '$' + pricingBox.querySelector('span.display-5').textContent
});
Again using bubbling/delgation, this method uses closest to find the ".pricing-box-cad" ancestor of the element clicked then gets the element with the price. Note the duplicate IDs have been moved to class.
Also note if you need to support IE (for a start I'm sorry about that!) you will need to use a pollyfill (mentioned in the link above).
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Find closest pricing box ancestor
let priceBox = e.target.closest(".pricing-box-cad")
if(priceBox) {
let price = priceBox.querySelector(".pricecad").innerText;
//console.log(price)
totalprice.textContent = "$" + price;
}
//Alert if clicked outside a pricing box
else {alert("clicked outside area") }
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
Now just for fun, I wanted to see how much I could do in CSS alone with minimal JS. So I came up with the below. This is for demonstration purposes only and is really just to show what you can achieve with minimal JS.
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Get value from radio button
let value = this.querySelector("[name=price]:checked").value;
//UPdate Attribute on price CSS will take care of the rest
totalprice.dataset.total = "$" + value;
});
#pricingdata label {
display:block;
}
#pricingdata :checked + label {
background-color:#CCC;
}
#pricingdata input[type=radio] {
display:none;
}
#totalprice:before {
content : attr(data-total)
}
<div class="row text-center pricing-box" id="pricingdata">
<input type="radio" value="30" id="rdoPrice1" name="price">
<label for="rdoPrice1" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="31" id="rdoPrice2" name="price">
<label for="rdoPrice2" class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice3" name="price">
<label for="rdoPrice3" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice4" name="price">
<label for="rdoPrice4" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="69" id="rdoPrice5" name="price" checked>
<label for="rdoPrice5" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice" data-total="$69"></strong></div>
</div>
So i am really confused on this one.
As you can see in developer tools on mobile everything looks fine with the layout but when i deploy a live version the stars overlap. I firstly thought this could be a safari based issue or device issue of some sort. But it is the same in chrome and on any mobile device. On desktops it is fine. I thought this could also be how the stars are being dynamically loaded onto the page so i changed the positioning of the script tags to place them at the end of the body but to still no avail.
Here is the output once live
MARKUP:
#* Brands *#
<section class="container container12 mb-5" id="indexBrands">
<div class="row">
<div class="col-12 text-center my-3">
<p class="h2">Featured Brands</p>
</div>
</div>
<div class="row p-xs-2">
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="/info/korniche"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/korniche.jpg" alt="Korniche flat glass lanterns" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Sleek and elegant glass roof lanterns ideal for elevating your flat roof extensions.</p>
</div>
<div class="col d-flex justify-content-center align-items-end">
<div class="korniche-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/korniche" id="signaturetCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/eco-plus-flat-roof-lights"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/eco-plus.jpg" alt="ECO+ Flat Glass Rooflights" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Eco friendly pitched and flat roof windows designed for adding natural light with minimum fuss.</p>
</div>
<div class="col d-flex justify-content-center align-items-end">
<div class="eco-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/eco-plus-flat-roof-lights" id="ecoCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down-->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/signature"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/signature.jpg" alt="Signature rooflights" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Fully certified, UK-manufactured rooflights. The number one choice for bespoke flat roof glazing solutions.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="signature-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/signature" id="signaturetCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-sm-block"></div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/velux"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/velux.jpg" alt="VELUX Pitched and flat roof windows" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">World renowned pitched roof windows built for creating a brighter and healthier indoor climate.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="velux-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/velux" id="veluxCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/rooflite"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/rooflite.jpg" alt="Rooflight roof windows" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Pitched roof windows guaranteed to brighten up your loft conversion without breaking the bank.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="rooflight-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/rooflite" id="rooflightCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/lightway"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/lightway.jpg" alt="Lightway sun tunnels" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Precision engineered Crystal sun tunnels perfect for introducing daylight into the darker areas of a property.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="lightway-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/lightway" id="lightwayCount"></a>
</div>
</div>
</div>
</div>
</section>
<script src="~/Content/JS/getStarRating.js"></script>
<script src="~/Content/JS/insertStars.js"></script>
getStarRating.js:
$(document).ready(function () {
$.get("/api/feefo/132",
function (data) {
kornicheRating(data.Rating);
});
$.get("/api/feefo/10",
function (data) {
ecoRating(data.Rating);
});
$.get("/api/feefo/108",
function (data) {
signatureRating(4.0);
});
$.get("/api/feefo/7",
function (data) {
veluxRating(data.Rating);
});
$.get("/api/feefo/5",
function (data) {
rooflightRating(data.Rating);
});
$.get("/api/feefo/74",
function (data) {
lightwayRating(data.Rating);
});
});
insertStars.js:
function kornicheRating(rating) {
$(".korniche-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function ecoRating(rating) {
$(".eco-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function signatureRating(rating) {
$(".signature-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function veluxRating(rating) {
$(".velux-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function rooflightRating(rating) {
$(".rooflight-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function lightwayRating(rating) {
$(".lightway-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
I recently used bootstrap to help me align my projects portfolio on my website. Certainly it did what i was expecting except the time i run the website on my mobile. I used container on every div element to keep it inside the area but the result is totally different.
If i run the mobile phone emulator inside a desktop browser it will display the expected result however, if i run it in real cell phone the result is all messed up.
The link to my website is- www.ijatin.ca and visit the project section inside it and try to run on mobile phone emulator and on real phone you would see 2 different results.
Can anyone tell, why is there such a difference and how can i overcome it?
Thanks so much
I see that you've used Bootstrap 4 and the best formation of usage should be like,
container -> [row -> col-* -> card] [row -> col-* -> card] [row -> col-* -> card] end of container.
But in your code
container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container
You don't have to have a container div for each row. Container divs can be placed as a parent where you would want to place your child elements within a bootstrap specific width. So I suggest to change your code like below
<article id="work" style="display: block;" class="active">
<div class="container">
<h2 class="major">Projects</h2>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12"> <!-- change column size according to your need -->
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-sm-12 col-lg-7 flaot-right project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="container col-sm-12 offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="close">Close</div>
</article>
This would look like
Hope this helps!