after creating products using flexbox items, the footer which has a google map location and communication details, it is coming over the flexbox items having product images. I have tried using various solutions like:
1.Giving footer - margin-top:100% or 1000px; working, but issue comes back in Mobile mode.
2.creating display: flex column for all the items inside the body, using nav, main and footer tags(that code is not given here) and giving hem appropriate growth, shrink and basis values. it too didn't work.
reading various solutions from StackOverflow made it clear that using Grid is an effective solution.
I tried this code and it didn't work too. Please giver a feasible solution. Thanks in advance.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>SathaJeevana Ayur Foods</title>
<link rel="shortcut icon" href="C:\Users\Durga siva prasad\Desktop\sathajeevana\images\logo.png" type="image/png" >
<style>
.break {
flex-basis: 100%;
height: 0;
}
html,body{
height: 100%;
}
body{
margin: 0;
}
body {
display: grid;
grid-gap: 10px;
height: 100%;
grid-template-columns:1fr;
grid-template-areas:
"nav"
"main"
"footer";
grid-template-rows: 100px 1fr 80px;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
</style>
</head>
<body >
<a class="navbar-brand"><img src="C:\Users\Durga siva prasad\Desktop\sathajeevana\images\logo.png" type="image/png" height="70" width = "100" ></a>
<div class="collapse navbar-collapse d-flex flex-wrap align-items-center" id="nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item" >
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Contact Us</a>
</li>
<li class="nav-item dropdown active" data-toggle="dropdown">
<a class="nav-link font-weight-bold px-3 dropdown-toggle" style="color: #008000" href="#">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item font-weight-bold" style="color: #008000" href="prodcol.html/#foodproducts" target="_self">Food Products</a>
<a class="dropdown-item font-weight-bold" style="color: #008000" href="prodcol.html/#oilproducts" target="_self">Oil Products</a>
</div>
</li>
</ul>
</div>
<main>
<a name="foodproducts"></a>
<div class="d-flex justify-content-around align-items-center flex-wrap" style="height: 500px;">
<div class="p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\SaltF.jpg" height="300" width = "200" >
<p class="font-weight-bold text-center" style="color: #008000" >Ayur 2 Salt</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class=" p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\MilletsF.jpg" height="300" width = "200">
<p class="font-weight-bold text-center" style="color: #008000">Ayur Millet Rice</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class="break"></div>
<div class="p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\Oil.jpg" height="300" width = "700">
<p class="font-weight-bold text-center" style="color: #008000" >Cooking Oil</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class="break"></div>
<div>
</main>
<footer id="footer">
<div class="row">
<div class="col-sm-8" id="map" style="height:400px; background:gray;"></div>
<div class="col-sm-4 " style = " display: flex; align-items: center ; justify-content: center" >
<p class=" font-weight-bold" style="text-align: center ">
<span style="color:green">Plot no: 12,<br>P.S.R. Colony,<br>Vizianagaram - 535002<br><br>
</span>
<span style="color:green">
8340979799 </br>
sathajeevanafoods#gmail.com
</span>
</p>
</div>
</div>
</footer>
<!-- jquery lib-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--fontawesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<!--This is used for search icon. Instead putting icon manually it is loaded from fontawesome-->
<!-- MAP scripts -->
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(18.1184,83.41799),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
Probably it was covered by the main section, try and give the main section z-index of 1 And the footer z-index of 2.
Try it you see it appear some where and think of a logic to push it down. Or in alternative that you may add high margin-top let's say 1000px or anything else, you will see it appear.
It's there but it was overlaped by preceding codes.
Try it
Related
I'm trying to center the search bar in the middle of the header in my WordPress website.
However, since I'm using a ready-made theme (Flatsome), the classes has already been made which make it more difficult to customize.
The problem is that the elements of the header use the same classes, which mean if i target one element another part get affected as well.
The website is here: toolstrading.se
I have been working with this code below.
.nav-uppercase {
text-align: center;
float: none;
display: inline-block;
margin-left: -30px;
}
As you can see, the elements on the right get affected by the CSS change
Appreciate all help I can get, since I'm getting crazy by this.
Thank you!
Edit
Here is the whole header block.
<header id="header" class="header has-sticky sticky-jump">
<div class="header-wrapper">
<div id="masthead" class="header-main nav-dark">
<div class="header-inner flex-row container logo-left medium-logo-center" role="navigation">
<!-- Logo -->
<div id="logo" class="flex-col logo">
<!-- Header logo -->
<a href="https://toolstrading.se/" title="Scandinavian Tools - Din helhetsleverantör av verktyg" rel="home">
<img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header_logo header-logo" alt="Scandinavian Tools"><img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header-logo-dark" alt="Scandinavian Tools"></a>
</div>
<!-- Mobile Left Elements -->
<div class="flex-col show-for-medium flex-left">
<ul class="mobile-nav nav nav-left ">
<li class="nav-icon has-icon">
<a href="#" data-open="#main-menu" data-pos="right" data-bg="main-menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-controls="main-menu" aria-expanded="false">
<i class="icon-menu"></i>
</a>
</li> </ul>
</div>
<!-- Left Elements -->
<div class="flex-col hide-for-medium flex-left
flex-grow">
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
<!-- Right Elements -->
<div class="flex-col hide-for-medium flex-right">
<ul class="header-nav header-nav-main nav nav-right nav-uppercase">
<li class="account-item has-icon
has-dropdown">
<a href="https://toolstrading.se/my-account/" class="account-link account-login
" title="Mitt konto">
<span class="header-account-title">
Admin </span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active">
Kontopanel
<!-- empty -->
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
Beställningar
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--downloads">
Nedladdningar
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
Adresser
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
Kontouppgifter
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
Logga ut
</li>
</ul>
</li>
<li class="header-divider"></li><li class="cart-item has-icon has-dropdown">
<a href="https://toolstrading.se/cart/" title="Varukorg" class="header-cart-link is-small">
<span class="header-cart-title">
<span class="cart-price"><span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span>
</span>
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="html widget_shopping_cart">
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
× <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons">Visa varukorgTill kassan</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- Mobile Right Elements -->
<div class="flex-col show-for-medium flex-right">
<ul class="mobile-nav nav nav-right ">
<li class="cart-item has-icon">
<a href="https://toolstrading.se/cart/" class="header-cart-link off-canvas-toggle nav-top-link is-small" data-open="#cart-popup" data-class="off-canvas-cart" title="Varukorg" data-pos="right">
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<!-- Cart Sidebar Popup -->
<div id="cart-popup" class="mfp-hide widget_shopping_cart">
<div class="cart-popup-inner inner-padding">
<div class="cart-popup-title text-center">
<h4 class="uppercase">Varukorg</h4>
<div class="is-divider"></div>
</div>
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
× <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons">Visa varukorgTill kassan</p>
</div>
<div class="cart-sidebar-content relative"></div> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="container"><div class="top-divider full-width"></div></div>
</div><div id="wide-nav" class="header-bottom wide-nav nav-dark flex-has-center">
<div class="flex-row container">
<div class="flex-col hide-for-medium flex-left">
<ul class="nav header-nav header-bottom-nav nav-left nav-size-medium nav-spacing-xlarge">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-28 current_page_item menu-item-30 active menu-item-design-default">Hem</li>
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 menu-item-design-default">Webbshop</li>
<li id="menu-item-48410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48410 menu-item-design-default">Erbjudanden</li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64 menu-item-design-default">Leasing</li>
</ul>
</div>
<div class="flex-col hide-for-medium flex-center">
<ul class="nav header-nav header-bottom-nav nav-center nav-size-medium nav-spacing-xlarge">
</ul>
</div>
<div class="flex-col hide-for-medium flex-right flex-grow">
<ul class="nav header-nav header-bottom-nav nav-right nav-size-medium nav-spacing-xlarge">
<li class="html header-button-1">
<div class="header-button">
<a href="http://partytent.se" class="button secondary" style="border-radius:99px;">
<span>Letar du efter tält och tillbehör?</span>
</a>
</div>
</li>
</ul>
</div>
<div class="flex-col show-for-medium flex-grow">
<ul class="nav header-bottom-nav nav-center mobile-nav nav-size-medium nav-spacing-xlarge">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-1">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-1" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
</div>
</div>
<div class="header-bg-container fill"><div class="header-bg-image fill"></div><div class="header-bg-color fill"></div></div> </div>
</header>
Add this styling
.header-nav.header-nav-main.nav.nav-left.nav-uppercase {
justify-content: center;
}
I checked the HTML structure of your site with the url you provided.
With the Chrome Dev Tools I inspected to find which element was the main container for your search bar.
This element is your main container and it is responsible for the centering:
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
Notice the class "nav-left"? ...Change it to the class "nav-center".
<ul class="header-nav header-nav-main nav nav-center nav-uppercase">
This will center your search like that:
https://i.imgur.com/DsyIMlX.png
You might need a Wordpress Child Theme to add custom CSS that does not get erased when you update your Wordpress version. And your CSS inside the Child Theme could target that main element.
#header ul.header-nav-main {
justify-content: center !important;
}
The !important is a specificity maximum level to be 100% sure that nothing else will bypass your rule. Sometimes Wordpress has a lot of different CSS in many different files. If you can avoid the !important keyword it's even better.
I only can see the tab which is I made active by default. But when I click on other tabs, I can't see anything. They just won't open. What's my mistake here? Need your help.
I tried to find the solution on bootstrap documentation, but I didnt come across with something like this.
By the way I am just learning bootstrap. But it's like I am just copying and pasting, is this wrong? How should I learn this? It seems a bit harder than just css. Cause there are many classes that are written by default.. I don't want to memorize. So is it good that I copy and paste when I need?
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>100$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>Must be finished in 6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>250$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>175$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex3-tab-1" data-mdb-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-2" data-mdb-toggle="tab" href="#ex3-tabs-2" role="tab" aria-controls="ex3-tabs-2" aria-selected="false">Part Time Program</a>
</li>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-3" data-mdb-toggle="tab" href="#ex3-tabs-3" role="tab" aria-controls="ex3-tabs-3" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="ex2-content">
<div
class="tab-pane fade show active"
id="ex3-tabs-1"
role="tabpanel"
aria-labelledby="ex3-tab-1"
>
<p>$70,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>80%</p>
<p>Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-2"
role="tabpanel"
aria-labelledby="ex3-tab-2"
>
<p>$60,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>75%</p>
<p>Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-3"
role="tabpanel"
aria-labelledby="ex3-tab-3"
>
<p>$40,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>65%</p>
<p>Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
</body>
</html>
Example in Bootstrap5 docs says to use: data-bs-toggle, you have data-mdb-toggle. That should fix it for all your nav-links.
<a class="nav-link active" id="ex3-tab-1" data-bs-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
https://getbootstrap.com/docs/5.0/components/navs-tabs/#base-nav
You have not added the javascript to do so.
Add this javascript to your code.
var triggerTabList = [].slice.call(document.querySelectorAll("#ex1 li a"));
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl);
triggerEl.addEventListener("click", function (event) {
event.preventDefault();
tabTrigger.show();
});
});
Documentation: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
Codepen: https://codepen.io/manaskhandelwal1/pen/eYdLYdN
The script tag for bootstrap javascript should be added after the body tag and not in the head tag, sometimes this will also create problems.
And you don't have to learn any bootstrap classes, gradually you will learn them automatically.
If you want any other help comment it here I will help you as soon as possible 😃.
Everything is going great, but I don't see this right and left arrors in my slide show. What should I do to fix it? I did the exactly what is in bootstrap documentation. I tried to look at on google, but couldn't find anything related to this issue. I need your help with this issue, please.
(it still doesnt upload my post, so filling the blanks)
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
background-color: rgb(236, 223, 223) ;
border-radius: 8px;
}
.big {
font-weight: bold;
font-size: 2rem;
font-family: 'Noto Serif', serif;
}
#outcomes {
padding:50px 70px 50px;
}
#outcomes a{
border:1px solid black;
border-radius: 10px;
}
#outcomes a:hover {
color: white;
background-color: gray;
}
.student-image {
height: 350px;
width: 450px;
}
#comments {
padding: 50px 70px 50px;
background-color: azure;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comments">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>400$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>1300$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>700$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="fulltime-tab" data-bs-toggle="tab" href="#fulltime" role="tab" aria-controls="fulltime" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="parttime-tab" data-bs-toggle="tab" href="#parttime" role="tab" aria-controls="parttime" aria-selected="false">Part Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="online-tab" data-bs-toggle="tab" href="#online" role="tab" aria-controls="online" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="myTab-content">
<div
class="tab-pane fade show active"
id="fulltime"
role="tabpanel"
aria-labelledby="fulltime-tab"
>
<p class="big">$70,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">80%</p>
<p class="small">Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="parttime"
role="tabpanel"
aria-labelledby="parttime-tab"
>
<p class="big">$60,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">75%</p>
<p class="small">Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="online"
role="tabpanel"
aria-labelledby="online-tab"
>
<p class="big">$40,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">65%</p>
<p class="small">Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
<!-- Comments -->
<section id="comments">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>I took the fulltime program course. It was amazing. Up to date curriculum, and the best instructors in their field</p>
<img src="student1.jpg" class="student-image" alt="student-photo">
<em>Selena, Miami</em>
</div>
<div class="carousel-item">
<p>I took the part time program course, and I got full stack python developer job only in 20 days within graduation.</p>
<img src="student2.jpg" class="student-image" alt="student-photo">
<em>Anna, Moscow</em>
</div>
<div class="carousel-item">
<p>This course made me job ready. Don't waste time with other time wasting courses. This is what you have been looking for!</p>
<img src="student3.jpg" class="student-image" alt="student-photo">
<em>Taylor, Paris</em>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
</body>
</html>
Background colour and button colour are white.
Either add a background color, like this:
#comments {
background-color: #ff0000;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/yLaxyyV
or change the colour of the buttons, like this:
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
For more info: https://stackoverflow.com/a/49017805/11171286
Codepen: https://codepen.io/manaskhandelwal1/pen/qBaMEdK
i am trying to create a responsive web site but i am stuck in one place that the images with a background-imaged mask are not functioning properly. It works fine with larger screens but in medium and small screens my headline and some of the images are not seen with the "masked" background image. So could you tell me where i am making the mistake? Is it coding or the method that i am doing wrong?
The pictures that how display the screen are at the bottom of this page.You can see in large screen there is no problem but in other screens you cant see the headline and only half of the images are shown and the background doesnt stretch to cover all images and headline!!!
enter link description here This is the website.You can see better what the problem is.
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Menü scroll change color-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css("background", "black");
}
else{
$(".navbar").css("background", "transparent");
}
})
})
</script>
<!--Menü scroll change color-->
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family:Arial;
}
.navbar-brand{
font-family: Gabriola;
font-size:35px;
padding-top:10px;
}
.navbar-nav li a {
color:white !important;
font-family: 'Kristen ITC';
}
.fixed-top .navbar-nav li a:hover {
color: red !important;
}
.fixed-top .navbar-nav li a:focus {
color: red !important;
}
.fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
.fixed-top.scrolled .navbar-nav li a {
color:red !important;
}
.fixed-top.scrolled .navbar-nav li a:hover {
color: red !important;
}
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-float{
margin-top:16px;
}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Avrupa Hayalleri - Avrupa'yı Görme Hayalleriniz Gerçek Olsun</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/ihover.css" >
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top ">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand red-text" href="#">BATU PARFÜM</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bayan Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Erkek Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unisex Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons ">
<li class="nav-item">
<!-- <a class="nav-link"><i class="fa fa-whatsapp fa-2x green-text "></i>0533 645 89 42</a> -->
<a class="nav-link" href="https://api.whatsapp.com/send?phone=905382392398"><i class="fa fa-whatsapp fa-2x green-text "> </i>0538 239 23 98 </a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div id="intro" class="view hm-black-strong container-fluid ">
<div class="container-fluid full-bg-img d-flex align-items-center justify-content-center ">
<div class="row container-fluid d-flex align-items-center justify-content-center">
<div class=" col-lg-8 col-md-8 col-sm-8 text-center ">
<hr class="hr-light ">
<!-- Heading -->
<h1 class=" font-bold mb-2 white-text">Kokunu Keşfet</h1>
<!-- Divider -->
<hr class="hr-light pt-2 ">
</div>
<!--Grid row-->
<div class="row col-lg-8 col-md-8 col-sm-8 container-fluid text-center mt-5">
<!-- Top to Bottom-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4 ">
<h2 class="mb-4 font-weight-bold white-text ">Unisex Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/perfume1.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Bayan Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/f484004e6a670c4a5827535756317ba7a.jpg" class="img-fluid" alt="" style="border:3px solid white; " >
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Erkek Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/e9feb436d5ed39c882d93ac8fc207e82a.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--Main Navigation-->
</body>
</html>
small screen
medium screen
large screen
you can use media queries for smaller screens. Try this css for mobile phones:
header{
height: auto;
}
#intro{
padding: 0;
height: auto;
}
.full-bg-img{
position: relative;
}
Im working on this html5 , using css, and my website works fine on chrome and firefox, but not in IE 10. Nothing written on css file applies on IE.
My website still remains locally and unfinished,but its driving me crazy as i tried so many answers to fix IE like html5shiv, and so on...
I checked on the validator also, and i only get errors of not recognized bootstrap attributes.
i would love if someone can get a look on my code
body {
background-color: #D1E0B2;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure {
display: block;
}
.fotos {
max-width: 100%;
height: auto;
}
.carousel-inner > .item > img {
max-width: 100%;
height: 360px;
margin: 0 auto;
}
.tres-colunas {
display: block;
width: 360px;
height: 170px;
vertical-align: middle;
border-bottom: 1px dashed #929493;
border-top: 1px dashed #929493;
margin: 10px;
padding-top: 8px;
float: left;
}
h3 {
font-size: 1.6em;
margin-top: 0;
}
.button-home {
float: right;
background-color: #A2BF4D;
border-radius: 6px;
color: #fff;
font-family: 'Arial';
font-size: 18px;
text-decoration: none;
cursor: pointer;
border: 1px solid #C2E066;
}
.button-home:hover {
float: right;
background-color: #9BB352;
border-radius: 6px;
color: #fff;
font-family: 'Arial';
font-size: 18px;
text-decoration: none;
cursor: pointer;
border: 1px solid #C2E066;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt" />
<meta name="description" content=' - ' />
<meta name="keywords" content=', ' />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<title>Yeshiva Or Israel College</title>
<script>
document.createElement("myHero")
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="shortcut icon" href="logo.png" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<a>
<img src="tres_rgb.jpg" alt="Logo Da Yeshiva" width="1130" height="145" />
</a>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Nossa filosofia
</li>
<li>Os Rabinos
</li>
<li>Campus
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Arquivos
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos
</li>
<li>Fotos
</li>
<li>Textos
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Links Associados
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Camp Hashivenu
</li>
<li>Site Rav Karaguilla
</li>
<li>Canal do Rav Passy
</li>
</ul>
</li>
<li>Faça Parte
</li>
<li>Contato
</li>
</ul>
<p> <b> Yeshivá Or Israel College. </b><i> Educando com amor.</i>
</p>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="carrosel_danca.jpg" alt="Dança dos Bachurim" />
<div class="carousel-caption">
<h3>União</h3>
<p>Alunos da Yeshivá dançando no páteo.</p>
</div>
</div>
<div class="item">
<img src="carrosel_shabat.jpg" alt="Um Shabat Especial" />
<div class="carousel-caption">
<h3>Um Shabat Especial</h3>
<p>A experiencia de Shabatot na Yeshivá eh algo especial.</p>
</div>
</div>
<div class="item">
<img src="carrosel_havdala_rs.jpg" alt="Havdala" />
<div class="carousel-caption">
<h3>Alegria no Judaismo</h3>
<p>Momentos especiais e inesqueciveis</p>
</div>
</div>
<div class="item">
<img src="carrosel_estudo_fora.JPG" alt="Estudo ao ar livre" />
<div class="carousel-caption">
<h3>Estudo da Torá</h3>
<p>Estudo da Torá em alto nivel.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="revista.png" alt="Revista Chai Or Israel" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Revista Chai </h3>
<p>A cada ano são lançadas novas revistas da Yeshivá ricas em conteudo e qualidade. Clique aqui para assinar a sua:</p>
</div>
<button class="button-home">Assinar</button>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="calendario.png" alt="calendario" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Novidades por aqui </h3>
<p>Fique por dentro dos novos eventos e acontecimentos.</p>
<span style="padding:25px"> </span>
</div>
<button class="button-home">Confira</button>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="livro-dessler.jpg" alt="Livros da Yeshivá" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Livros da Yeshivá </h3>
<p>A Yeshivá já publicou dezenas de livros. Venha conhecer quais!</p>
<span style="padding:25px"> </span>
</div>
<button class="button-home">De uma olhada</button>
</div>
</div>
</body>
</html>
, im not loading the images, if its necessary tell me...
check if other browser are showing it correctly or not like(chrome ,firefox etc) also check if this happens only in your laptop/pc or every laptop/pc.
if it is happening only in your pc/laptop then there might be a chance that your IE has not enabled the style sheet option. I also had the same problem.
To fix this issue use the following steps:--
1.Start regedit.exe.
2.Go to HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main.
3.Double-click Use StyleSheets (or create this value of type String if it doesn't exist).
4.To allow style sheets, set StyleSheets to yes; to disallow, set it to no.
Click OK.
5.Close regedit.
6.Restart Internet Explorer (IE).
do reply if this help you or not..
I'm on Windows 8.1 using IE11 with the same issue. This is how I fixed it:
On your computer search for "regedit.exe" (go to the start menu and click on the search button on the top-right corner of the screen).
Once regedit opens up, on the left column click on "HKEY_CLASSES_ROOT" and then on ".css"On the right column double-click on "Content Type". This will open up a dialog box.
In the dialog box change "value data" to "text/css".
Click "Ok" and that's it.
I hope this helps other people out there.
Can you check the same thing on server cause respond.js works only on server.
Can you try loading the style sheet first by typing the below link in the address bar
http://localhost:paortnumber/path of your css folder/myStyle.css
Please let me know what you find?