here is the fiddle I am working on Demo
How do I make this column completely responsive so that when the screen size becomes less I want all the elements to stay inline rather than stacking below one another.
How to solve this ?
Here is the sample markup
<div id="apologies-list">
<ul id="apologies-list-content">
<li><a tabindex="-1" href="#">
<div class="user-avatar list-padding span12 clearfix" >
<div class="span1">
<input class="case" name="case" type="checkbox" value="">
</div>
<div class="span2">
<img id="list-avatar" src="http://placehold.it/60x60" alt="" />
</div>
<div class="span6">
<span>Apologies initials</span>
<small>January 31, 2009 9:18 am</small>
</div>
<div class="span3 ">
<span class="badge badge-info custom-badge">2</span>
<i class="icon-trash"></i>
</div>
</div>
</a>
</li>
</ul>
</div>
For CSS please check my fiddle.
use css media queries
#media screen and (max-width:400px)
{
#apologies-list-content li div {display:inline-block}
}
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'm creating an account page (header) for the first time, and I notice that some of the icons will not align perfectly with the text. I know how simple and easy this is for advanced developers, but I'm just starting off and really need some advice.
I have tried using padding and margin as a style element but didn't work.
<header>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8">
<div class="row">
<div class="col-sm-3">
<img src="paylocity_logo.png" alt="logo" style="width:100%"S/></a>
</div>
<div class="col-sm-9 hidden-sm hidden-xs" id="project-details">
<a class="home-link" href="" title="Edit"> <i class="material-icons"> home </i> </a>
<div class="project">
User Profile
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 text-right" id="account">
<i class="material-icons">account_circle</i> <span>Tom Markart </span>
<div id="account-options">
<ul>
<li>
<span> <i class="material-icons">account_circle</i></span>View Profile
</li>
<li>
<span class="fa fa-cog"></span>Settings
</li>
<li>
<span class="fa fa-bug"></span>Report a Bug
</li>
<li>
<span class="fa fa-power-off"></span>Log Out
</li>
</ul>
</div>
</div>
</div>
</header>
I want to make them straight.
In your case, you can add the following rule:
.material-icons {
vertical-align: middle;
}
https://codepen.io/anon/pen/EBBbpd
Using flex:
Wrap text in <span> and a wrapper class to <a>.
...
<li>
<a class='wrapper' href="javascript:void(0);">
<span class="fa fa-cog"></span>
<span>Settings</span>
</a>
</li>
...
.wrapper {
display: flex;
align-items: center
}
I have some ads I want placing side by side and making all the same size but, whilst float: left works to get them to float left, display: inline-block, which should stack them in a grid side by side, and max-width doesn't.
Tried Css
#media (min-width: 768px){.box-
layout {max-width: 100%; float:
left; display: inline-block;}}
This, as mentioned, floats left but doesn't place side by side or make all the ads the same size. It also throws up a css lint obstruction that float and display can not be used together.
https://adsler.co.uk/find-an-event/
HTML:
<div class="line-layout"
style="display: none;">
<li class="event_listing post-6985
type-event_listing status-expired
hentry" style="visibility:
visible;" data-latitude="" data-
longitude="">
<div class="event-
info-row-listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free-
film-festival/">
<div class="row"><div class="col-
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div><div class="col-md-4">
<div class="event-title">
<h4>New Cross and
Deptford Free Film Festival</h4>
<div class="boxes-view-
listing-
registered-code">
</div>
<div class="event-
organizer-
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date"
<date>2019-05-26</date>
</div>
</div>
<div class="col-md-3">
<div class="event-
location"><i class="glyphicon
glyphicon-map-
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event-
ticket">#free</div>
</div>
<div class="col-md-3">
</div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985
type-event_listing status-expired
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free-
film-festival/">
<div class="box-layout">
<div class="event-img"><img
alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box-
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film
Festival
</div>
<div class="event-start-
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon-
map-
marker"></i> London </div>
<div class="box-footer">
<div class="event-
ticket">#free</div>
</div>
</div>
</a>
your html and css are quite chaotic.
I made an example how it should be and how it works.
Ps. don't pay attention to
max-width:800px;
thats just for demo purposes.
https://codepen.io/anon/pen/QXWLrg
Hope it helps you out!
I have list that I render with semantic-ui and it needs some margin to the top for the first element. I looked in the CSS code and I see margin-top:0!important and I can override it for the first element with margin-top:10px!important; and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">All
</li>
<li class="nav">Company
</li>
<li class="nav">Private
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<div class="ui divided items">
<div class="item">
<div class="ui left floated">
7 July.
<br>3:33
</div>
<div class="image">
<a href="/vi/5022701123010560.html">
<img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Dit Interactive have experts wordpress ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Central NJ</div>
<div class="ui label">New Jersey</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
7 July.
<br>0:54
</div>
<div class="image">
<a href="/vi/5870511561113600.html">
<img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Pari J. Moazed, DDS is a family dentist ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Baltimore</div>
<div class="ui label">Maryland</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
This "solution" works, but I don't like it
<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">
By the looks of it I would personally just change the margin on the with the simple line:
.container .nav{
margin-top:10px;
}
Does this answer your question? (I know it looks too simple to be true)
I would suggest adding a custom class to <ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
and adding margin-bottom to it
.custom-class{
margin-bottom:20px;
}
We are adding a custom class to unordered list <ul> so that changes made to it doesn't effect other elements which are using nav class
On your div.tab-content try adding class ui basic segment
I know it is waaay overdue, but I came across this thread when looking for the same issue in Semantic UI React. My solution was to add a divider above the first container:
<Divider hidden></Divider>
I'm having this problem where the picture stays to the left, I've already initialized it in my js, I tried changing the size of the picture, used different browsers, and it has the same result. Can somebody help me in solving this?
HTML
<nav class="#607d8b blue-grey">
<div class="nav-wrapper container">
<!-- Interaq-->
<ul class="left hide-on-med-and-down">
<li>HOME</li>
<li>GAMELIST</li>
<li>REVIEWS</li>
<li>NEWS</li>
<!-- Dropdown Trigger -->
<!-- <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>-->
</ul>
<!--Search bar-->
<form class="right hide-on-med-and-down">
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<div class="parallax-container">
<div class="parallax"><img src="<?php echo base_url();?>materialize/img/banner1.jpg"></div>
</div>
Result
Try this out. Mistake was equal sign after width property in Krushio Vida's answer.
<div style="width:100%;" class="parallax-container">
<div class="parallax">
<img src="<?php echo base_url();>materialize/img/banner1.jpg">
</div>
</div>
Here is, jsfiddle
Try to set width style to 100% directly at the divs e.g.
<div style="width:100%" class="parallax-container">
<div style="width:100%" class="parallax"><img style="width=100%" src="<?php echo base_url();?>materialize/img/banner1.jpg"></div>
</div>
You should make your image responsive with a class="responsive-img"
<img class="responsive-img" alt="parallax" src={img} />
float:right is applied to the form instead of input-field.
<form class="right hide-on-med-and-down">
<div class="input-field">
Change this to
<form class="hide-on-med-and-down">
<div class="input-field right">
Materialize Css Parallax Codepen