I'm doing a site in Shopify and I'm using supply theme, I want to use my own menu instead of using Shopify menu. I wrote code in HTML and CSS but I was wondering if it is possible for someone to help me to change following code in liquid because my friend does not know any HTML and CSS and for him, it's easier to change it through the liquid.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
</div>
</body>
</html>
Even though I agree with drip's comment:
StackOverflow is not a "Write the code for me" platform.
Here is some helpful information, Liquid is templating language and there are many places to get you started with Liquid:
Shopify - Liquid reference
Shopify - Getting started Guide
Shopify Partners Blog - Learning Liquid
Related
I am incredibly new to html and css, so please bear with me. I am attempting to make a website for two airbnb listings, and the webpage looks fine on a computer: Display on Webpage Here
However, on mobile, everything looks completely different: Display on Mobile Here
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column {
text-align: center;
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
flex-direction: column;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" style="width:450px;height:300px;margin:auto">View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" style="width:450px;height:300px;margin:auto">View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
</div>
<div class="row">
<div class="column">
Learn More
</div>
<div class="column">
Learn More
</div>
</div>
</body>
</html>
Is there any way that I can make it so this doesn't occur and the mobile browser looks similar to the desktop? What are my alternatives if this is impossible?
I'd recommend using flexbox instead of floats, which are an older and less efficient way to do your layout. In the code below I stacked the airbnb frames vertically for mobile and tablet view, then horizontally for desktop like you had them. I had to rearrange some of your html code to achieve this, and use media queries. It was easier for me to use style tags to add the CSS for this example. I also had to change the width of the airbnb-embed-frame and remove the inline style rules in the html for that, as the 450px width was causing problems with the layout in mobile view. I tried to put the code in the example setting for the answer but it wasn't showing the airbnb frames. I hope this answer is satisfactory, this is kind of my take on how I'd like to make it look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<style>
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media (min-width: 1024px) {
.row{
display: flex;
justify-content: space-around;
}
}
.airbnb-embed-frame{
width: 300px;
margin: auto;
}
#media (min-width: 768px) {
.airbnb-embed-frame{
width: 450px;
}
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.column-2{
margin: 30px;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" >View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" >View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
</div>
</body>
</html>
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
I copied the "mega menu" navbar from W3Schools to a blank page and attached custom CSS, but as soon as I attach the bootstrap CSS file, the header layout is changed completely and the dropdown content doesn't show up anymore. I added two images below the snippet to show what exactly happens. I tried finding the CSS conflict with element inspector without success. I also tried different versions of bootstrap.css but all versions are causing the same navbar to become misplaced.
/* HEADER CSS */
/* Custom */
.navbar {
height:100px!important;
border-bottom:5px solid rgba(55,175,75,1.00)!important;
background-color:rgba(255,255,255,1.00)!important;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"!important;
}
.brand {
margin-top:9px!important;
width:175px!important;
}
.brand-link {
background-color:rgba(255,255,255,0.00)!important;
}
.brand-link:hover {
background-color:rgba(255,255,255,0.00)!important;
}
.navlink {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
font-size:1.10em!important;
font-weight:300!important;
}
.navlink:hover {
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,0.35)!important;
}
.droplink {
}
.droplink:hover {
}
.dropbtn {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
cursor:pointer!important;
font-size:1.10em!important;
font-weight:300!important;
}
.dropdown-content {
margin-top:-2px!important;
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header-title {
margin-top:0!important;
margin-bottom:8px!important;
color:rgba(255,255,255,1.00)!important;
font-size:1.35em!important;
}
.dropdown-content .droprow {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .dropcol {
background-color:rgba(55,175,75,1.00)!important;
}
/* Default */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Naamloos document</title><h3></h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar">
<a href="/index.htm" class="brand-link">
<img src="/img/brand.png" class="responsive brand" alt="navbar brand icon">
</a>
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="header">
<h2 class="header-title">Mega Menu</h2>
</div>
<div class="row droprow">
<div class="column dropcol">
<h3 class="header-title">Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 3</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 4</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Without any bootstrap CSS file attached (blue area is image), while mouse over dropdown button!
With bootstrap CSS file attached (blue area is image), also while mouse over dropdown button!
https://getbootstrap.com/docs/3.3/
Try Bootstrap 3 and check if that still happens to you.
Found the solution!
I completely removed the .navbar class and all corresponding CSS classes from the bootstrap.css file and replaced it with the W3Schools navbar CSS.
As this is a testing site I can do this, but I would not recommend it as a definitive solution. It may cause problems later (I haven't experienced any so far).
So I wanted to know if it's possible to use the bootstrap grid (something like ) to try and have two accordions side by side.
This is the code I've been using, taken from w3schools with some modifications. I've just included the relevant sections, but if more information is required, please say so.
img {
max-width: 100%;
max-height: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.solid {
border-style: solid;
}
.gainsboro-background {
background-color: gainsboro;
}
.white-box {
background-color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
<button class="accordion"><b> Example 1 </b></button>
<div class="panel">
<p> Example 1 </p>
<p> Example 1 </p>
<p> Example 1 </p>
</div>
<button class="accordion"><b> Example 2 </b></button>
<div class="panel">
<p> Example 2 </p>
<p> Example 2 </p>
<p> Example 2 </p>
</div>
I thought I could add
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
Above the button classes, and obviously closing the div elements, but that doesn't work. I'm not too sure what I should do here.
Question: Is it possible to use the bootstrap grid on an accordion, to have two side by side accordions?.
I have checked the appropriate APIs and I can't find a similar question.
try this in bootstrap
<style>
img {
max-width: 100%;
max-height: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.solid {border-style: solid;
}
.gainsboro-background { background-color:gainsboro;
}
.white-box {
background-color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-6">
<button class="accordion" data-toggle="collapse" data-target="#example_1"><b> Example 1 </b></button>
<div class="panel collapse" id="example_1">
<p> Example 1 </p>
<p> Example 1 </p>
<p> Example 1 </p>
</div>
</div>
<div class="col-sm-6">
<button class="accordion" data-toggle="collapse" data-target="#example_2"><b> Example 2 </b></button>
<div class="panel collapse" id="example_2">
<p> Example 2 </p>
<p> Example 2 </p>
<p> Example 2 </p>
</div>
</div>
</div>
</div>
and demo link https://jsfiddle.net/kingtaherkings/cxbxs8vj/
Working on a page for my website and I'm trying to set up a series of profiles side-by-side.
The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side.
I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. Help?
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img.center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.Gar{
padding-left: 300px;
}
.gar-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.gar-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
/*MAYU PROFILE*/
.Mayu{
padding-left: 750px;
display: in-line;
}
.mayu-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
display: in-line;
}
.mayu-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
display: in-line;
}
<!doctype html>
<html>
<!--HEAD INFORMATION-->
<head>
<link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<!--END: HEAD INFORMATION-->
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
<p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="gar-block1"><h3>"Gar"</h3></div>
<div class="gar-block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</p>
<!--CHARACTER PROFILE: MAYU-->
<div class="Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="mayu-block1"><h3>Mayumi Mori</h3></div>
<div class="mayu-block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</aside>
</p>
</body>
</html>
I'm not sure if i can understand you well here but did you mean that you want the profile to be centered?
If this is the case, i already made it for you.
Please also check your html code, there are lots of missing </> close tag
I also edit some of your codes, please check the codes below both HTML and CSS.
Since .Gar and .Mayu are same layout, i made the css layout of it in one class profile display both container inline-block
Hope it helps.
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img .center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.profile {
margin-left: 300px;
display: inline-block;
margin-bottom: 100px;
}
.block1 {
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.block2 {
background-color: #d9d9d9;
color: black;
font-family: "Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact</li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
</p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="profile Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="block1">
<h3>"Gar"</h3>
</div>
<div class="block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</div>
</p>
</div>
<!--CHARACTER PROFILE: MAYU-->
<div class="profile Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="block1">
<h3>Mayumi Mori</h3>
</div>
<div class="block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</div>
</aside>
</p>
</div>
Use float:left; in your css style sheets.
#a{
float:left;
}
#b{
float:left;
}
this two divs whith id : a , b will be side by side but you need to use clear:both; in next div;Remember about closing tags .I hope it helps