My question is a pretty straightforward one. I'm using Bootstrap 4.0 to make a website. I have a Carousel Element below which my Container begins. The Container consists of two Rows, one for the Footer and the other for the Columns that house my content. I'm trying to align the three columns side-by-side (like actual columns). Each Column consists of one DIV Element (Bootstrap Column Class); with one image and text below it image. This works fine when I set the size properties of the images in the index.html file. However, once I copy the same information into my custom CSS file, the columns become stacked. I'm pretty sure I'm calling the images with the correct Syntax in CSS. But its just not working. I'm attaching screenshots to give an idea of what I intent to do and what actually is happening.
Any sort of help would be highly appreciated.
Thank You.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel = "stylesheet" href="custom.css">
<title>AlphaGamigLeague</title>
</head>
<body>
<nav class="navbar nav-pills">
<a class="navbar-brand" href="#">
<img src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" width="100px" height="100px">
</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End Of Navigation Bar -->
<!-- Beginning Of Carousel -->
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" height="650px" width="400px" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1Rq95g-w1Dpr-pq9vuI4p9bVV2hHPHiIw" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Of Carousel -->
<!-- Beginning Of Container -->
<br>
<br>
<!-- Beginning Of Main Content -->
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover" width = "350px" height= "400px">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H" width = "350px" height= "400px">
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q" width = "350px" height= "400px">
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
<!-- Footer Begins Here -->
<!-- Second Row Begins Here -->
<div id = "myRow2" class="row">
<!-- First Column Begins Here -->
<div id = "myRow2Column1" class="col-md">
sdasdasdasdasdasda
<br>
<!-- Disclaimer DIV Begins Here -->
<div id = "disclaimer">
<p>
All rights reserved. No fhsofsei fhioyw39847 ryo8wrt 48wotr o3qwryy 9aw4ro87
</p>
</div>
<!-- Disclaimer DIV Ends Here -->
</div>
<!-- First Column Ends Here -->
<!-- Second Columns Begins Here -->
<div id = "myRow2Column2" class="col-md">
<br>
<!-- Instagram Icon DIV Begins Here -->
<div id = "instagram">
<img src= "https://drive.google.com/uc?export=download&id=1jiCKayOmqF5hk1FDrF9wAfiG2VYlHoki" width= "50px" height = "50px" align = "right">
</div>
<!-- Instagram Icon DIV Ends Here -->
<!-- Twitter Icon DIV Beginss Here -->
<div id = "twitter">
<img src= "https://drive.google.com/uc?export=download&id=1JhT0U6SXfrZ8jyKOUhbZoEs7kpQ7bdXp" height= "50px" width= "50px" align = "right">
</div>
<!-- Twitter Icon DIV Ends Here -->
<!-- Facebook Icon DIV Begins Here -->
<div id = "facebook">
<img src= "https://drive.google.com/uc?export=download&id=1ZGjOfBJHrzCrXeP3hoc2FsgCLFX41sq2" height= "50px" width= "50px" align = "right">
</div>
<!-- Facebook Icon DIV Ends Here -->
</div>
<!-- Second Column Ends Here -->
</div>
<!-- Second Row Ends Here -->
</div>
<!-- Bootstrap Container Ends Here -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
CSS CODE:
.logo_image {
height: 200px;
width: 100px;
}
/* .nav-brand allows the logo properties to be changed */
.navbar-brand {
}
.navbar{
background-color: black;
}
.navbar-toggler{
background-color: orange;
border-radius: 8px;
}
.navbar navbar-expand-lg{
background-color: aqua;
}
.collapse{
background-color: aqua;
}
.btn{
background-color: whitesmoke;
}
.body{
background-color: black:
}
.carousel-inner{
height: 650px;
}
.carousel-item active{
height: 90px;
}
.item active{
height: 50px;
}
#myRow1{
background-color: pink;
height:auto;
width: auto;
}
#whoarewe{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow1Column2{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow2{
background-color: forestgreen;
height:auto;
}
#myRow1Column3{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#disclaimer{
width: 300px;
text-align: left;
}
#socialMediaLinks{
position: relative;
bottom: 30px;
}
#myRow2Column2{
margin-right: 40px;
margin-left: 100px;
}
#instagram{
position: relative;
right: 20px;
}
#twitter{
position: relative;
right: 40px;
}
#facebook{
position: relative;
right: 60px;
}
#myfirstImage{
width = 150px;
height= 400px;
}
#mysecondImage{
width = 350px;
height= 400px;
}
#mythirdImage{
width = 350px;
height= 400px;
}
#firstImage{
}
#secondImage{
}
#thirdImage{
}
#secondImage:hover{
opacity: 0.6;
visibility: visible;
}
Intended Layout. Works when image size dimensions are specified in index.html.
Actual layout. When image size dimensions are removed from index.html and added to the CSS file.
Remove fix width from the images and add the img-fluid class to them.
I mean, what exactly do you expect to happen when you set fix width on the images? Anyway, the first step is to remove the fix width and then, to make the images responsive, you add the img-fluid class.
Here's the working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img class="img-fluid" id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img class="img-fluid" id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H">
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img class="img-fluid" id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q">
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
</div>
Related
Why does my top navbar on this page wrap before and after the "Landscaping" menu option?
I'm taking W3.CSS out for a test drive and am finding it a fairly satisfactory experience so far. I've produced a skeleton website rather quickly and find it clearer and more concise than I'm used to getting when I don't use W3.CSS.
The skeleton is working reasonably well aside from the strange split around the Landscaping option. See the page here.
I can't see anything in my code that would seem likely to cause these breaks. Or maybe I should say my debugging skills with Devtools are not quite sufficient to know how to track this problem down.
Can anyone help me figure out what's wrong?
.w3-block {
display: inline-block !important;
width: auto !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aux02 - About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="javascript/all.js"></script>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card" id="myNavbar">
Auxsable
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<i class="fa fa-home"></i> HOME
<i class="fa fa-mobile-alt"></i> CONTACT US
<a onclick="myAccFuncTop()" href="javascript:void(0)" class="w3-button w3-block w3-white" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i></a>
<div id="demoAccTop" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> FORESTRY
<i class="fa fa-user"></i> ABOUT US
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div><!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
Close <i class="fas fa-times-circle"></i>
<i class="fa fa-home"></i> Home
<i class="fa fa-mobile-alt"></i> Contact Us
<!-- Landscaping -->
<a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-white w3-left-align" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> Forestry
<i class="fa fa-user"></i> About Us
</nav>
<div class="w3-auto">
<div class="w3-container w3-padding">
<br><br><br>
<h1>About Us</h1>
<p>J<del>xxxxxx</del> S<del>xxxxxxx</del> is a Registered Professional Forester and graduate of the
Honours Bachelor of Science in Forestry program at Lakehead University in Thunder Bay.</p>
<p>J<del>xxxxxx</del> has extensive experience in silviculture and site rehabilitation. Along with
landowners, J<del>xxxxxx</del> writes woodlot management plans and tree marking prescriptions that
focus on each customer's needs and desires for their woodland area.</p>
<p>Combining her skills of forest management and silviculture, she adds a little flair and generates
unique and beautiful native plant landscape designs for the Carolinian Forest Region.</p>
</div>
<div class="w3-container w3-padding">
<div class="w3-panel w3-light-grey w3-large">
<p class="w3-medium w3-serif">
<i>Serving Lambton, Huron, Middlesex and Essex Counties</i></p>
</div>
</div>
</div><!-- w3-auto -->
<!-- Footer -->
<footer class="w3-center w3-blue-grey w3-padding">
<p><i class="far fa-copyright"></i> 2019</p>
</footer>
</body>
</html>
You can change two class like this
/* if you dont want to float right */
.w3-right {
/* float: right!important; */
}
.w3-block {
display: inline-block;
/* width: 100%; */
}
If you want to keep float right, only change css .w3-block to
.w3-block {
display: inline-block;
/* width: 100%; */
}
Above is the screen shot of the html structure of your menu.
You could use ul and li for the same menu and the sub menu items as well.
I do not know much about W3.css but your css has too many "!important", which is not at all recommended. Instead I would suggest you to re-work the structure, as the current one will not support the RWD.
<style>
.menu{
display:block;
text-decoration:none;
list-style:none;
/* width as per requirement; & other styling */
}
.menu > li{
position:relative; /* important to maintain the sub-menu item as local. */
display:inline-block;
/* width if needed */
}
.menu li a {
display:block;
width:100%;
/*padding as per the need*/
}
.menu .subMenu{
display:none;
position:absolute;
/* top as per the height of the .menu line-height or height */
left:0;
/* width: 100% or in em's */
}
.menu > li:hover .subMenu{
display:block;
}
.menu .subMenu li{
display:block;
width:100%;
}
</style>
<ul class="menu">
<li><span class="homeIcon"></span><span>Home</span></li>
<li><span class="contactusIcon"></span><span>Contact us</span></li>
<li><span class="forestryIcon"></span><span>forestry</span></li>
<li><span class="aboutusIcon"></span><span>About us</span></li>
<li>
<span class="landscapingIcon"></span><span>Landscaping</span>
<ul class="subMenu">
<li class="subMenuItem"><a href="#"item one</a></li>
<li class="subMenuItem"><a href="#"item two</a></li>
<li class="subMenuItem"><a href="#"item three</a></li>
</ul>
</li>
</ul>
I want to increase the image size whenever the window size decreases and I used the media queries for that. whenever the window size is 423 then the image size increases. so I tried using media queries but it didn't apply to that tag. how to increase the size? this is my HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
#media screen and (max-width:768px ) and (min-width: 320px)
{
.samyata {
width:100px;
height:auto;
}
}
</style>
</head>
<body>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id = "first" style="margin-left:7%" >
<div class="col-sm-6">
<img src="Assets/img/sam.png" class = "samyata"
hspace="30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform
and ecosystem to bring stores, shoppers and
personal shoppers together in a geographically
specific, simple buying and selling experience.
</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
</div>
<div class="col-sm-6">
<img src="Assets/img/vahaka.png" hspace = "30" class = "vahaka" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left">
Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases.
Be your own boss. Do it when you want.
Get paid right away.
</p>
<a href = "#" class ="text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>
</div>
</div><br><br>
<div class = "row" style="margin-left:7%">
<div class="col-sm-6" >
<img src="Assets/img/gananam.png" hspace = "30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores
for a new way to make money,
reach new customers and deliver
products to your customers.</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a><br><br><br>
</div>
</div><br>
</div>
</body>
How to apply that? please help me out from this problem. I want all the images and text side by side when the window size is decreases and increase but when i decreases i comes same part of the text under the image. i want all the text on the same side of image.
The img with class="samyata" has its style inline (i.e. in a style attribute). This will always override the style in the stylesheet.
Solution: take the style out of the attribute and put it in the stylesheet, above the media query.
Your other problem, the text wrapping around below the images, can be solved by putting the text in a block of its own and giving that a left margin.
.samyata, .vahaka, .gananam {
width: 28%;
height: 40%;
float:left;
}
.row {
padding-bottom: 1em;
}
.block {
margin-left:37%;
}
.col-sm-6 h5 {
margin-top: 0;
font-family: 'Fira Sans Condensed';
text-align: left;
}
#media screen and (max-width: 768px) and (min-width: 320px) {
.samyata, .vahaka, .gananam {
width: 100px;
height: auto;
}
.block {
margin-left:130px;
}
}
</style>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id="first" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/rblbG.jpg" class="samyata">
<div class="block">
<h5> Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform and ecosystem to bring stores, shoppers and personal shoppers together in a geographically specific, simple buying and selling experience.
</p>
Explore Samayata
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/N3atj.jpg" class="vahaka">
<div class="block">
<h5> Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases. Be your own boss. Do it when you want. Get paid right away.
</p>
Explore Vahaka
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="https://i.stack.imgur.com/TUvgC.jpg" class="gananam">
<div class="block">
<h5> Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores for a new way to make money, reach new customers and deliver products to your customers.</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a>
</div>
</div>
</div>
</div>
Also, don't use hspace. It is deprecated and has compatibility problems. Use margins instead.
Edit: I made some changes, but I'm not sure it looks the way you want now. So consider this a work in progress.
I am trying to make my h1 text not squished to the left. I am also using bootstrap so I'm not sure if that effects anything:
h1 {
margin: 5px 40px 10px 70px;
}
<html>
<head>
<script src="https://use.fontawesome.com/d712ea1844.js"></script>
<title>About Mike</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/a1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">About Mike</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Resume</li>
<li>Artifact 1</li>
<li>Artifact 2</li>
</ul>
</div>
</div>
</nav>
<h1 id="annoyingtitle">Examples of Work</h1>
<p id="p0">This is an example of a paper I wrote while I attended Frankline Pierce University. In this paper I look at the lenses at which mental illness is viewed in different parts of the world.</p>
<br/>
<A id="mentallink" HREF="mentalillness.docx">Mental Illness Cultural Lenses and Barriers</A>
<br/>
<p id="p1"> Reflection: Writing this essay was easily one of my hardest assignments I have ever done. It involved levels of research that I hadn’t done before. I learned how to form an argument while drawing evidence from multiple sources. This has helped me in my research and writing skills. My favorite part of writing this paper was doing the research. On this assignment we were allowed to pull sources from almost anywhere as long as they were credible, I enjoyed being able to go as far as my mind could take me. The one risk I believe I took with this project was the structure and flow. The entire assignment was 9 pages long. This made my biggest problem getting it all to flow together and getting my ideas in the right order. If I could re-do this assignment I wish I would write a better conclusion to the paper. </p>
<br/>
<div id="annoying">
<ul id="list1" class="text-center list-unstyled">
<li class="col-md-4"> <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
<br>
#M
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
<br>
mike
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-envelope" aria-hidden="true"></i>
<br>
email#email.com
</li>
</ul>
</div>
</body>
</html>
Your margin is working. You want your h1 not squished to the left? How about horizontally centered? (I usually put margin bottom on headers though)
h1 {
margin: 0 0 10px 0;
text-align: center;
}
Make sure you are saving the file, refreshing your browser, maybe clearing your cache, close your browser and re-open, do the same for your text editor, etc. Your code does work.
Make sure the local URL is correct in your browser, etc., or post your entire code. Try a different browser. There either has to be an element that doesn't have a closed tag, another CSS file that is overriding your h1 elements, or something that you have not posted that is conflicting with your styles.
Can someone take a look at my html? Previously, my scrollspy was working but I dont know what happend and its not working anymore. I have been at this for 2 hours and I still can't get it to work. I dont recall doing any breaking changes.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nate The Great</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|Istok+Web|Lora" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel='shortcut icon' type='image/x-icon' href='./assets/img/favicon.ico' />
</head>
<body data-spy="scroll" data-target="#navbar" >
<!--Start of Navigation Bar-->
<div class="navbar transparent pull-right navbar-fixed-top" id="navigation">
<div class="container-fluid">
<p class="navbar-brand " id="brand"> <img src="./assets/img/profile.jpg" alt="" style="display: inline; margin-right: 3px; border-radius:50%">Nathaniel D Alcedo Jr</p>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About</li>
<!--<li>Blog</li> will workk on this-->
</ul>
</div>
</div>
</div>
<!--End of Navigation Bar-->
<!--Landing Page-->
<div id='home'>
<h1>
Nathaniel D Alcedo Jr,
</h1>
<h2 >aspiring web developer</h2>
</div>
<!--End of Landing Page-->
<div class="text-center" id="portfolio">
<h1>Projects Finished</h1>
<p>Free Code Camp <u>Calculator</u></p>
</div>
<div class="pull-left" id="about">
<h1>A little about me</h1>
<p>
Hello there! As the title suggests, I am an aspiring web developer.
I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck
around on the computer. It ranges from making mock websites to thinking of my own implementations
of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow.<br><br>
My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby!
It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently
doing Free Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to
look for a job in this wonderful field we call software development.
</p>
</div>
<!--Start ofFooter Bar-->
<!--
<footer class="footer pull-left navbar-fixed-bottom"> TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE
<div class="container">
<div class="row">
<div class="col-sm-2">
<p>Copyright © Nathaniel</p>
</div>
</div>
</div>
</footer>-->
<!--End of Footer Bar-->
<script src="./assets/js/jquery-3.1.1.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/c1a4d3ec73.js"></script>
<script>
// This script enalbes the smooth scrolling of pages when clicking links on the Navbar
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
You need to apply the .navbar-default class to the navbar as well as change your id of id="navigation" to reflect the data-target, currently it's data-target="#navbar".
**Currently there isn't enough content to actually scroll so a generic height is set for example purposes.
Working Example: Open to FullPage
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
.navbar.navbar-default {
background-color: transparent;
border: 0;
}
.navbar.navbar-default .navbar-brand span,
.navbar.navbar-default .navbar-brand img {
display: inline-block;
}
section {
padding-top: 70px;
min-height: 750px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target="#navbar">
<div class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="http://placehold.it/20x20/000" alt=""> <span>Nathaniel D Alcedo Jr</span>
</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Projects
</li>
<li>About
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<section id='home'>
<h1>Nathaniel D Alcedo Jr,</h1>
<h2>aspiring web developer</h2>
</section>
<section class="text-center" id="portfolio">
<h1>Projects Finished</h1>
<p>Free Code Camp <u>Calculator</u>
</p>
</section>
<section id="about">
<h1>A little about me</h1>
<p>
Hello there! As the title suggests, I am an aspiring web developer. I'm currently serving my time in the Singapore Armed Forces and in my free time, I like to muck around on the computer. It ranges from making mock websites to thinking of my own implementations
of basic data structures. I find pleasure in breaking code and trying to fix them using stackoverflow.
<br>
<br>My first contact with a programming languges was in polytechnic during a module on c++. How I sucked terriby! It wasn't until halfway through my time in national service did I take an interest in programming once again. I'm currently doing Free
Code Camp's course on web development in my free time. I turn operationally ready in may of 2017 and I intend to look for a job in this wonderful field we call software development.
</p>
</section>
</div>
<footer class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
TODO: PLACE THIS AT THE BOTTOM OF THE TOTAL PAGE
</div>
<div class="col-sm-3">
<p>Copyright © Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Trademark ® Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Something Nathaniel</p>
</div>
<div class="col-sm-3">
<p>Something Nathaniel</p>
</div>
</div>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm very noob in bootstrap. I tried my first bootstrap page and then downloaded a theme from bootswatch.com and replaced the bootstrap.css with the Cerulean theme. When I change the font in the bootstrap.css it stay with the old theme
#import url(//fonts.googleapis.com/css?family=Caesar+Dressing);
but its not reflecting when I refresh my page.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
</style>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand">GUVI</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're linking to the right font, yeah; that said, here's my take on this:
In most cases you should use a tag to import Google web fonts. I generally avoid using #import where possible because it delays the loading of the file.
All you should need to do to replace the font is to specify the new font-family as 'Caesar Dressing' inside a body {} style block. Assuming you've already done that in your local copy of bootstrap.css, if that still doesn't work try specifying it inside a tag inside your HTML. You should avoid doing that where possible though; it makes it annoying down the road when you have multiple pages to maintain.
One other thing: I noticed you have some inline styles for some of your inputs. You should really avoid using those where possible--it's good form to try and separate presentation and content markup as much as possible.