How can i have a button lose it's text but not it's icon when viewing on a mobile advice?
For example when it shows a face icon by MaterializeCSS and the text "support", I want it to remove the text but still show the icon so the button becomes smaller in size. I use the MaterializeCSS framework and the Materialize icons.
The button looks like this in html:
<a class="waves-effect waves-light white-text top-button z-depth-2">
<i class="material-icons left">
face
</i>
Contact support
</a>
<a class="waves-effect waves-light white-text top-button z-depth-2">
<i class="material-icons left">
face
</i>
<span class="hide-on-small-only"> Contact support </span>
</a>
You need to add span tag with hide-on-small-only class from materialize to hide button text on mobile only.
Try this one
Use media query on mobile like this .
#media only screen and (max-width: 767px) {
.top-button {
font-size: 0;
}
.top-button i {
font-size: 16px;
}
}
Here is the working code
.top-button {
font-size: 16px;
}
#media only screen and (max-width: 767px) {
.top-button {
font-size: 0;
}
.top-button i {
font-size: 16px;
}
}
<a class="waves-effect waves-light white-text top-button z-depth-2"><i class="material-icons left">face</i>Contact support</a>
Related
i want to apply text end or push the buttom to end in pc view and make each buttons take whole width and stack upon each other in mobile view for two href buttons inside ! any idea??
<div class="row flex-between-end ps-0 pe-0">
<div class="col-md-5">
<label class="col-form-label text-facebook">#wordInfo["Title"]</label>
</div>
<div class="col-md-7 ps-sm-0">
<a href="#(ViewData["ROOT_URL"])menu/menuform/#Common.CommonConst.Mode.PUB_C_REGIST/"
class="btn btn-outline-primary mb-2 ms-1 float-md-end ">
<span class="fas fa-plus " data-
fa-transform="shrink-3"></span> #wordInfo["Regist"]</a>
<a href="#(ViewData["ROOT_URL"])menu/menusublist/" class="btn btn-outline-primary mb-2
float-md-end"><span class="fa fa-bars" data-fa-transform="shrink-3"></span>
#wordInfo["MenuSubList"]</a>
</div>
pc view ok
enter image description here
should looks like this in mobile view
enter image description here
Add this class mobile to label(Menu list) & a tag(Sub,Reg).
#media (max-width: 800px) {
.mobile {
display: flex;
flex-direction: column;
align-items: center;
}
}
This will make them vertical when screen-width<=800px, change the vaue if you need to.
I have buttons which follow the following structure:
<button type="button" class="btn btn-dark btn-sm"(click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
They look like this:
I can change the height and width of the buttons and the inline icons will stay centered:
.btn.btn-dark.btn-sm {
height: 80px;
width: 200px;
}
But then when im making them smaller for mobile, all of the sudden, the inlined icons stop being centered after i fall below a certain width/height:
#media (max-width: 690px){
.btn.btn-dark.btn-sm {
width: 10px;
height: 20px;
}
}
Why do they stop being centered on small width/height? How would i fix it? I tried alligning them to the center etc, but didnt find a working solution yet.
It looks like the button may have some padding that interferes when too small. Try this snippet
.btn.btn-dark.btn-sm {
height: 20px;
width: 20px;
padding: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button type="button" class="btn btn-dark btn-sm" (click)="doSomething()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
I'm trying to use media queries to change the text links in a navbar to icon font characters on smaller screens utilising display:none but it's not working as I'm currently using it.
I'm also using Font Awesome's icon fonts using the classes fa fa-home etc
.firstnav {
display: inline;
}
.secondnav {
display: none;
}
#media only screen and (max-width: 630px) {
.firstnav {
display: none;
}
.secondnav {
display: inline;
}
}
<nav class="topnav" id="myTopnav">
<a href="#home">
<p class="firstnav">Rob Hern</p>
<p class="secondnav poppins">RH</p>
</a>
<a href="#home">
<p class="firstnav">Home</p>
<p class="secondnav fa fa-home"></p>
</a>
<a href="#portfolio">
<p class="firstnav">Portfolio</p>
<p class="secondnav fa fa-code"></p>
</a>
<a href="#contact">
<p class="firstnav">Contact</p>
<p class="secondnav fa fa-envelope-o"></p>
</a>
<a href="#about">
<p class="firstnav">About</p>
<p class="secondnav fa fa-user"></p>
</a>
</nav>
Viewing as:
Full size screen
With media query size screen
Thank you!
Add one more condition
.secondnav.fa{ display:none}
#media only screen and (max-width: 630px) {
.secondnav.fa {
display: inline;
}
}
Because font-awesome icons are display:inline-block by default so you have to overwrite them as you are using them directly with your p tags .secondnav class.
Below is a working snippet .
.firstnav {
display: inline;
}
.secondnav {
display: none;
}
.secondnav.fa {
display: none;
}
#media only screen and (max-width: 630px) {
.firstnav {
display: none;
}
.secondnav {
display: inline;
}
.secondnav.fa {
display: inline;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="topnav" id="myTopnav">
<a href="#home">
<p class="firstnav">Rob Hern</p>
<p class="secondnav poppins">RH</p>
</a>
<a href="#home">
<p class="firstnav">Home</p>
<p class="secondnav fa fa-home"></p>
</a>
<a href="#portfolio">
<p class="firstnav">Portfolio</p>
<p class="secondnav fa fa-code"></p>
</a>
<a href="#contact">
<p class="firstnav">Contact</p>
<p class="secondnav fa fa-envelope-o"></p>
</a>
<a href="#about">
<p class="firstnav">About</p>
<p class="secondnav fa fa-user"></p>
</a>
</nav>
Have you tried to use inline-block?
Your code works fine. You can see it here. Play with the vertical handler. And you'll see it works.
Note : Have you tried clearing your browser's cache?
Maybe it's a bug, I'm not sure, but when using the mobile collapse menu, the icons and the text are not aligned (see images).
The reason is because of these CSS properties:
HTML:
.side-nav a {
color: #444;
display: block;
font-size: 1rem;
height: 64px;
line-height: 64px;
padding: 0 30px;
}
nav i.material-icons {
display: block;
font-size: 2rem;
height: 56px;
line-height: 56px;
}
<ul style="transform: translateX(0px);" class="side-nav" id="mobile-menu">
<img src="images/costum_logos/logo3.png" class="custom-logo">
<div class="divider"></div>
<a href="index.php" class="waves-effect waves-light">Albums
<i class="material-icons left notranslate">collections</i>
</a>
<a href="?page=settings" class="waves-effect waves-light">Settings
<i class="material-icons left notranslate">settings</i></a>
<a class="waves-effect waves-light red-text text-lighten-1" href="index.php?logout">Logout
<i class="material-icons left notranslate">power_settings_new</i>
</a>
</ul>
Of course, the interesting bits are the line-height and height properties on both the anchor tag, and the icon tag. They are not equal. If I override either one of them, to be exactly like the other - they are perfectly aligned.
My question is: Am I doing something wrong? I can easily get around it, but I want to have a good practice with materialize CSS. Don't wanna hack around and break their conventions.
Thanks in advance!
I'm using the default CSS that came with bootstrap; also using the bootstrap theme and dashboard CSS.
By default, when on xs devices, the sidebar disappears. Well, this is what i'm using for all my application's main navigation. So, I'd like for it to switch to a horizontal layout on such devices, but I can't find anything online about how to do this.
I scoured the documentation, but it's pretty lousy IMO. There should be a breakdown of all the classes and their uses. I imagine there's a class i can add that will do what I want.
Does anyone know it?
Here's the html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-1 col-lg-1 overflow-fix">
<ul class="nav nav-sidebar">
<li class="icon-center">
</i>
</li>
<li class="icon-center">
<i class="fa fa-users fa-2x" data-toggle="tooltip" data-placement="right" title="Users"></i>
</li>
<li class="icon-center">
<i class="fa fa-building-o fa-2x" data-toggle="tooltip" data-placement="right" title="Accounts"></i>
</li>
<li class="icon-center">
<i class="fa fa-sitemap fa-2x" data-toggle="tooltip" data-placement="right" title="Branches"></i>
</li>
</ul>
</div>
</div>
</div>
Turns out the .css files actually have pretty good comments so I was able to see that .sidebar class had display:none; on it. Then found the media query right under it which gets activated when on larger view ports.
Added the below to my overriding css file, and now it changes to horizontal centered menu when on small screens, then pops back to the sidebar on large screens.
.sidebar {
display:block;
border-bottom: 1px solid #eee;
}
.sidebar ul {
text-align:center;
margin-bottom:0px;
}
.sidebar ul li{
display:inline-block;
}
#media (min-width: 768px) {
.sidebar ul li{
display:block;
}
}
I'm quite new to messing with CSS, so if anyone has a suggestion for how better to format the above code, please don't hesitate to share!
The sidebar has display: none by default. This can be overriden by
.sidebar
{
display:block;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}