Explanation
I'm using Bulma to create a divided page with a fixed Navbar, but as you can see below, Title 1 and Title 2 won't line up with Navbar and Title 3, since the container left/right margin is set to auto and, therefore, goes to 0 in this first section configuration. Is there any way to achieve this using Bulma?
The problem starts happening in 1024px or higher.
Code
I've changed the container background color to yellow so it's easier to see the issue.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.0/css/bulma.min.css" />
</head>
<style>
.container {
background-color: yellow;
}
</style>
<body>
<nav class="navbar is-fixed-top" role="navigation" style="background-color: transparent;">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
</div>
</div>
</nav>
<section class="columns is-vcentered is-gapless mb-0">
<div class="column">
<div class="hero is-fullheight is-info">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 1
</h1>
</div>
</div>
</div>
</div>
<div class="column">
<div class="hero is-fullheight is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 2
</h1>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-fullheight is-success">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 3
</h1>
</div>
</div>
</section>
</body>
Related
I have this code
https://jsfiddle.net/kxrmcpzn/
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Landing Page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style type="text/css" media="screen">
.flex-even {
flex: 1;
}
.hero,
.navbar {
background-color: #1f2937;
color: #f9faf8;
}
</style>
<body>
<div class="container">
<div class="navbar">
<div class="logo">Header Logo</div>
<div class="navbar-items">
header link one
header link two
header link three
</div>
</div>
<div class="hero d-flex">
<div class="flex-even">
<h1>This website is awesome</h1>
<p>
This website has some subtext that goes here under the main title.
It's a smaller font and the color is lower contrast
</p>
<button class="btn btn-primary">Sign up</button>
</div>
<div class="flex-even">
<img src="https://via.placeholder.com/350x150" />
</div>
</div>
<div>
<h2 class="fw-bold text-center">Some random information</h2>
<div class="d-flex">
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
</div>
</div>
<div>
<p>
This is an inspiring quote, or a testimonial from a customer. Maybe
it's just filling up space, or maybe people will actually read it. Who
knows? All I know is that it looks nice.
</p>
<p class="fw-bold">-Thor, God of Thunder</p>
</div>
<div class="d-flex bg-primary text-white p-3 rounded">
<div>
<p class="fw-bold">Call to action! It's time!</p>
<p>
Sign up for our product by clicking that button right over there
</p>
</div>
<div>
<button class="btn btn-light">Sign up</button>
</div>
</div>
</div>
</body>
</html>
I want the width of each element inside outer div is full page width 100% like this
https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png
I try using class container-fluid but the text will not be inside container
You could combine container-fluid and container:
<div class="container-fluid navbar">
<div class="container">
...
</div>
</div>
I have the following html code and what I am trying to do is to align all the black boxes on the top of the container and make the whole container content responsive so when the window gets smaller if the images do not fit in the container, they move down and align themeselves just like justify content-between to the entire container. I have trouble with the middle image because it has 2 paragraphs bellow it and the black-box gets higher than the others black boxes. Also I am having trouble making it responsive. Can someone please help?
<html lang="el">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container menu-images">
<div class="menu-img-div">
<a href="Publications.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Posts HPV">
<p>TEXT 1</p>
</a>
</div>
<div class="menu-img-div"><a href="Videos.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="videos HPV">
<p>TEXT 2</p>
</a>
</div>
<div class="menu-img-div"><a href="Information.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Cheatsheet-Frame HPV">
<p>TEXT 3.1</p>
<p>TEXT 3.2</p>
</a>
</div>
<div class="menu-img-div">
<a href="Poster.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="poster HPV">
<p>TEXT 4</p>
</a>
</div>
<div class="menu-img-div">
<a href="Questions.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Συχνές-ερωτήσεις HPV">
<p>TEXT 5</p>
</a>
</div>
</div>
</section>
</body>
</html>
Also here is my css
.menu-img-div {
display: inline-block;
}
.menu-images {
max-width: 1324px;
}
If this is how the container looks on desktop:
IMGUR
and on mobile:
IMGUR
then why don't you just use the grid system? (https://getbootstrap.com/docs/5.0/layout/grid/) it's much easier:
<div class="container">
<div class="row">
<div class="col col-12 col-md-4">
<p>Content</p>
</div>
<div class="col col-12 col-md-4">
<p>Content</p>
</div>
<div class="col col-12 col-md-4">
<p>Content</p>
</div>
</div>
</div>
I have an issue with my website where whitespaces render outside the HTML tag borders on mobile. The issue is on mobile only and the same thing happens when the mobile chrome browser is set to desktop mode on mobile.
Initial load mobile
This is how the website loads initially on mobile but the scroll is going way past the viewport of the HTML tags.
Zoomed out
The thing I don't understand is the website removes the whitespace if the client rotates from portrait to horizontal and back.
As I use the same static template on all webpages the issue persists throughout the whole website.
The website is: Zefir.codes
Website uses:
Animate (CSS Library)
Bulma (CSS Library)
Heres the template for the static webpages:
<html>
<head>
<title>A Hacker's world</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index-min.css">
<link rel="stylesheet" href="css/animate.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="section">
<div class="container">
<a href="index.html"> <h1 class="title animated pulse">
Zefir Repository <img src="img/logo.png" width="150px" height="150px" align="right">
</h1>
<p class="subtitle animated bounceInRight">
A <strong>Hacker's</strong> World
</p>
</a>
</div>
</section>
<br/>
<div class="container is-widescreen">
<div class="tabs is-small animated lightSpeedIn">
<ul>
<li>Tutorials</li>
<li>Projects</li>
<li>About me</li>
</ul>
</div>
</div>
<br/>
<!--Page Content-->
<div class="animated zoomIn">
<div class="container is-fluid">
<!--Column start-->
<div class="columns">
<!--first Column-->
<div class="column is-one-quarter">
</br>
<p class="title">
Updates
</p>
<!--Notify03-->
<div class="card">
<header class="card-header">
<p class="card-header-title">
A rebirth of the website!
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">
The website is coming back and strong!
<br>
<time datetime="2020-05-15">22:04 - 15 May 2020</time>
</div>
</div>
</div>
</div>
<!--second Column-->
<div class="column">
</br>
<p class="title">
News
</p>
<div class="card">
<header class="card-header">
<p class="card-header-title">No News
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">...
<br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time>
</div>
</div>
</div> <div class="card">
<header class="card-header">
<p class="card-header-title">No news </p>
</header>
<div class="card-content"> <div class="content">... <br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time> </div> </div></div>
</div>
</div>
</div>
<!--End of Content-->
</br>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Zefir Repository is a collection of projects and tutorials by <strong>Jan Andersson</strong> Hosted on <strong>Infinityfree</strong>.
</p>
</div>
</div>
</footer>
</div>
</body>
</html>
It does this because your elements are positioned way to the right before the animation starts and the browser keeps this whitespace.
Either change your animation or a simple fix is to add:
body {
overflow-x: hidden;
}
add overflow-hidden to the body of your website hope this solves your issue.
I was trying to implement bootstrap in my project..But the col-md-3 is taking the full width of a container
The following is the code:-
<!DOCTYPE html>
<html>
<head>
<title>Home page </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="containe-fluid">
<div class="row" >
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU<br>$229.00
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core<br> $269.00
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am unable to put the diffent products in one line and it is coming one below the other
Please help me am a newbie and am caught up.
Avoid the use of inline width: 25% for the col-x-* classes. Also for supporting mobile width, Add col-xs-6.
col-xs- has no minimum screen size, so it makes sense to always include it. This is further explained in this Boostrap Grid Sizes post. To save you some reading, the main bits of interest are:
.col-xs-: Phones (<768px)
.col-sm-: Tablets (≥768px)
.col-md-: Desktops (≥992px)
.col-lg-: Desktops (≥1200px)
To add offset, use col-md-offset-4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-md-6 col-md-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core
<br>$269.00
</p>
</div>
</div>
</div>
</div>
Plz add Bootstrap link to the page in the head section
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Also, remove width=25% from the columns
also, change
<div class="containe-fluid">
to
<div class="container-fluid">
Stop using width:25% . The cause is when you use inline style it gets top priority on loading in html view page . And thus the whole bootstrap and inline style gets messed up .
Hope this will help your project get finished faster .
Please make sure that you load bootstrap in your html file.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Home page </title>
</head>
I have tested your code with bootstrap css and it's working like it should.
I'm building a site with the latest Twitter Bootstrap using the responsive features.
My problem is that I have two lists that appear side by side, but when the viewport width is less than 768px wide they appear stacked despite there being enough space for both of them to fit. How can I fix this?
Also, a couple of minor things: In the footer I have a strange A symbol appearing before the copyright symbol...how do I sort this out? Also, in IE two elements don't appear inline like they do on all other browsers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3 phone_numbers">
<img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="navbar_link navitem1"><strong>HOME</strong></li>
<li class="divider-vertical navitem2"></li>
<li class="navbar_link navitem3"><strong>GALLERY</strong></li>
<li class="divider-vertical navitem4"></li>
<li class="navbar_link navitem5"><strong>ABOUT US</strong></li>
<li class="divider-vertical navitem6"></li>
<li class="navbar_link navitem7"><strong>CONTACT</strong></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid content">
<div class="span6">
<div id="homepage_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid homepage_text">
<div class="span12">
<h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12 icon_container">
<img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
<h5 class="redtext grid_item grid_text">Northampton Based</h5>
<img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
<h5 class="redtext grid_item grid_text">Free Quotes</h5>
</div>
<div class="span12 icon_container2">
<img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
<h5 class="redtext grid_item grid_text">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
<h5 class="redtext grid_item grid_text">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1 lists">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3500
})
</script>
</body>
The CSS is here: http://gw.gd/Ooky
Thanks in advance.
As #Omega noted, the stacking of columns <768px is the default Bootstrap behaviour. You can override this with some custom CSS though. Here's a post with a similar question: Stack elements in twitter bootstrap media grid differently
Regarding the strange symbol in your footer, start by checking that your header includes:
<meta charset="UTF-8">
Good luck!