The following is part of my website. What it is supposed to do is create two side-by-side regions when there is sufficient width. Otherwise, the regions should be stacked on top of each other.
<body>
<div id="tab-container" class="tabs is-centered is-small is-fullwidth is-marginless is-paddingless">
<ul>
<li id="1" class="is-active">
<a>1</a>
</li>
<li id="2">
<a>2</a>
</li>
<li id="3">
<a>3</a>
</li>
<li id="4">
<a>4</a>
</li>
<li id="5">
<a>5</a>
</li>
</ul>
</div>
<div class="columns is-paddingless is-marginless" style="background: yellow;">
<div class="column is-paddingless is-half" style="background: indigo">
</div>
<div class="column is-paddingless is-half" style="background: black">
</div>
</div>
</body>
When the width is sufficient, the website looks ok:
However, when I shrink the website - and it transitions to stacked mode - the black and purple regions disappear.
How can I fix this?
Related
I have a pricing plan page that I am trying to add a toggle switch to. I can't seem to figure out the proper way to vertically align the text of it: here is my fiddle
I've tried to set the margin and the padding but the Monthly and Annual are always at the top.
<div class="background">
<div class="container">
<div class="toggle-btn" style="background-color:transparent;text-align:center;position:relative;z-index:99;vertical-align:top;">
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Monthly</span>
<label class="switch" style="margin-bottom:15px;">
<input type="checkbox" id="checbox" onclick="check()" />
<span class="slider round"></span>
</label>
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Annual </span>
</div>
<div class="panel pricing-table">
<div class="pricing-plan">
<img src="https://s22.postimg.cc/8mv5gn7w1/paper-plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
Sign up
</div>
<div class="pricing-plan">
<img src="https://s28.postimg.cc/ju5bnc3x9/plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
Free trial
</div>
<div class="pricing-plan">
<img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
Free trial
</div>
</div>
</div>
</div>
Remove the margin-bottom from that switch element and add display:flex;justify-content:center;align-items:center; to .toggle-btn
Here's the edited fiddle: https://jsfiddle.net/bjd3wps1/
you just had to add position: relative to the spans containing the text and than update the bottom value to bottom: -5px
here's the updated fiddle: https://jsfiddle.net/a2nwet54/
I am trying to create a two-columns layout. Main content column contains the blog card and the second column which I'm trying to place at the top right corner contains.
This is the blog card.
The Bootstrap layout I'm using:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url({{ post.featured_image }})"></div>
<ul class="details">
<li class="author">John Doe</li>
<li class="date">Aug. 24, 2015</li>
<li class="tags">
<ul>
<li>Learn</li>
<li>Code</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</div>
<div class="description">
<h1>{{post.title}}</h1>
<h2>Opening a door to the future</h2>
<p>{{post.summary}}</p>
<p class="read-more">
Read More
</p>
</div>
</div>
</div>
{% endfor %}
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>
You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
The col-md-4 content doesn't stick to the right on desktop view, it just appears at the bottom of the card. I've tried several methods but it doesn't work. I'm actually calling an API and using the blog card to display posts from the CMS I am using. Instead of the sidebar to remain at the top right with the first post it sticks to the last post.
You use container class in main tag. This class has max-width and padding from left and right. If you want use 100% of the page use container-fluid class.
<main role="main" class="container-fluid">
<div class="row">
<div class="col-md-8" style="border:solid 1px red">
{% blog %}{% card html }
</div>
<div class="col-md-4" style="border:solid 1px red">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>
You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>`
I eventually got it to work: I made the sidebar show only on certain screen sizes. Although, my blog card gets scattered, I am okay with the outcome.
Instead of using columns, media queries did the trick:
#media only screen and (min-width: 1020px) and (max-width: 3000px)
In a card-tabs element from materialize css framework I'm trying to setup an ag-grid table.
Here is the code.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4" style="height: 200px;">
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
The problem is that I cannot auto resize the height of the element with id='test4' in order to gird be viewable. If I remove the style="height:200px;" from it, the grid doesn't show up. If I added it's being shown but I don't want to keep it statically on 200px since the grid's height could be varied.
Is there any way to make the div with the id='test4' automatically resize itself according to the size of the ag-grid?
I tried to put height:auto; both in card-content and test4 divs but without any success.
Div will not be shown if there is not content in it. Why don't you just put blank   value inside html.
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab">Test 4</li>
<li class="tab">Test 5</li>
</ul>
</div>
<div class="card-content grey lighten-5">
<div id="test4"
<div ag-grid="$ctrl.gridOptions" class="ag-theme-material" style="height: 100%;"></div>
</div>
<div id="test5">Test 5 content</div>
</div>
</div>
I have two <div>s surrounding an image in same row, but when I add the image the right <div> drops below.
I've tried float, display:inline-block and even styling the HTMLtags, but it didn't help.
Please help me out.
Here's my code:
<title>Hair by Michelle</title>
<body>
<div class="all">
<div class="navbar">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="hours">
<h1>Hours</h1>
<p>Tuesday: 12pm-7pm</p>
</br>
<p>Wednesday: 12pm-7pm</p>
</br>
<p>Thursday: 10am-7pm</p>
</br>
<p>Every other Saturday: 10am-7pm</p>
</div>
<div class="services">
<h1>Services</h1>
<h4>Women's Haircut $32</h4>
</br>
<h4>Men's Haircut $22</h4>
</br>
<h4>Full head color $50</h4>
</br>
<h4>Full highlights $70</h4>
</br>
<h4>Color toning $15</h4>
</br>
<h4>Facial waxing $12</h4>
</div>
</div>
Ignore the result area, just paste it in an editor.
if you want elements to line up in the same line should add:
float:left;
position:relative;
for the HTML I would recommend each image in a div:
.imgrow {
width:100px;
height:100px;
position:relative;
float:left;
}
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
I see just one image in your code...
If you need the text to be displayed next to the image, try this-
<div class="navbar">
<div style="float:left;">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div style="float:right;">
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
I'm stuck with the CSS of following HTML link and want to expand the height of header image so I can adjust larger with it, but when I play with the CSS of the .header & .logo classes it expands the navigation bar also, I just really need to expand the height of the header image to have larger height logo into it.
Looking your html source seems you can have different solutions. Problem is with your html... You have
<div class="navigation">
inside
<div class="container">
Ans : get navigation div out of container div. Then changing the height of container div would be the best and not affect the height of your links.
Why you are getting problem : your header div is containing links inside it. That is why changing the height of header is not good (It simply changes the overall height of this div).
Update : Reply to your first comment on my answer
<div class="inner">
<div class="container">
<!-- Logo Start -->
<div class="five columns left">
<img src="images/logo.png" alt="" />
</div>
<!-- Logo End -->
<div class="eleven columns right">
<!-- Top Links Start -->
<ul class="top-links">
<li>
<h4 class="colr">Search Music</h4>
<div id="search-box">
<input name="" value="Enter any keyword"
onfocus="if(this.value=='Enter any keyword') {this.value='';}"
onblur="if(this.value=='') {this.value='Enter any keyword';}" type="text" class="bar" />
<button>Search</button>
</div>
</li>
<li>
LOG IN
<div id="login-box">
<h4 class="white backcolr">User Login </h4>
<ul>
<li>
<input name="" value="yourname#email.com"
onfocus="if(this.value=='yourname#email.com') {this.value='';}"
onblur="if(this.value=='') {this.value='yourname#email.com';}" type="text" class="bar" />
</li>
<li>
<input name="" value="password"
onfocus="if(this.value=='password') {this.value='';}"
onblur="if(this.value=='') {this.value='password';}" type="password" class="bar" />
</li>
<li>
<input type="checkbox" class="left" />
<p>Remember me</p>
Forget Password?
</li>
<li>
<button class="backcolrhover">Login</button>
</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
<!-- Top Links End -->
</div>
<div class="clear"></div>
</div>
<!-- Container End -->
<!-- Navigation Start -->
<div class="navigation">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul id="nav">
<li class="current-menu-item">Home</li>
<li>NEWS</li>
<li>Albums
<ul>
<li>Albums</li>
<li>Album Detail</li>
</ul>
</li>
<li>Blog
<ul>
<li>Blog</li>
<li>Blog Detail</li>
</ul>
</li>
<li>Gallery
<ul>
<li>Gallery - Two Column</li>
<li>Gallery - Three Column</li>
<li>Gallery - Four Column</li>
<li>Gallery - Slide Show</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
<li>BUY THIS THEME</li>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- Navigation End -->
</div>
Then change your css and see the results
.container {
width:100%;
height:100px; /* I have changed it 50px to 100px*/
float:left;
margin-top:2px;
}
Change your header height here :
#header {
width:100%;
height:148px; <-----------Here
float:left;
position:relative;
z-index:2;
margin-bottom:15px;
box-shadow:0px 2px 2px #000;
background:url(../images/header.gif) repeat-x;
}
Edit: I just inspected with firebug, you are using multiple classes and you've nested div's, your logo div lies here
five columns left
I guess you've picked this template and you are trying to edit it right?