I want to hide a telephone icon I've added when the browser is full screen desktop mode. I am using the template which is online here: https://sartre.thememountain.com/index-architecture-2.html
So far in mobile mode it looks ok. When I expand to full screen, the icon is floating in the corner. I want to hide fa-phone from view.
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<i class="fa fa-phone"></i>
<i class="far fa-envelope"></i>
<div class="logo">
<div class="logo-inner">
<img src="images/architecture/logo-dark.png" alt="Happy Kids Logo" />
<img src="images/architecture/logo-dark.png" alt="Happy Kids Logo" />
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
.fa-phone {
color:#000;
font-size:25px;
display:inline-block;
position: absolute;
left: 78%;
top:29%;
}
.fa-phone:fullscreen{
display: none
}
'''
#media only screen and (min-width: 768px) { /* For desktop: */ .fa-phone{ display: none; }
Related
So I'm creating a site and one of the problems is that when I change the margins for content a link from the header can be presses only in the left-margin of the screen on mobile mode.
because of this the first tag gets broken and can be pressed only in the left margin of the screen
Here is the source code: https://github.com/mcosminc/mcosminc.github.io
The problem occurs in the index.html (in the at ) and style.css ( in the #media and screen(max-width:500) )
I tried to make the text content on mobile more easy to read, but setting the margins resulted in the first tag from the navbar to get broken and only be able to be clicked in the left-margin of the screen. This problem occurs only in mobile mode, to check it more easy here is the place where I hosted it: mcosminc.github.io
Here is the Code:
#media screen and (max-width: 500px) {
.ref-text{
display: none;
}
.main:not(#article-video){
margin-left: 1rem;
margin-right: 1rem;
}
hr{
margin-left: 1rem;
width: 90%;
}
}
}
<header>
<div class="navbar">
<a class="menu-bars" id="show-menu">
<i class="fas fa-bars"></i>
</a>
<ul id="referinta">
<li class="ref-text">Impactul COVID-19 asupra antreprenoriatului și comportamentului consumatorilor</li>
</ul>
<div class="mode">
<a class="day-mode invisible">
<i class="far fa-sun icon" id="sun"></i>
</a>
<a class="night-mode">
<i class="far fa-moon icon" id="moon"></i>
</a>
</div>
</div>
<nav id="nav-menu">
<ul class="nav-menu-toggle">
<a class="menu-bars-toggle" id="hide-menu">
<i class="fas fa-bars icon-bars"></i>
</a>
<hr />
<div class="nav-section">
<li class="nav-text"></i> Home</li>
<li class="nav-text"><i class="fa fa-youtube nav-icon s-icon"></i> Youtube</li>
</div>
<hr />
<p id="copy">Creat de <br>Ciovina Mihaita Cosmin</p>
</ul>
</nav>
<script src="app.js"></script>
</header>
i tried your code and i didn't find your problem but i just male a suggest to use padding instead of margin.
I've been having an issue regarding the alignment of both my content and the cards used from the Materialize CSS library. I've been trying to find a way to keep my Font Awesome icons centered in the designated card panels relative to the aspect ratio. Is there something I'm doing wrong with my tags and classes?
HTML:
<body>
<div class="row">
<div class="col s3">
<div class="card-panel teal grey darken-1 center-block">
<center><a class="icon" href="" target="_blank"><i class="fa fa-linkedin fa-4x"></i></a></center>
</div>
</div>
<div class="col s3">
<div class="card-panel teal grey darken-1 center-block">
<center><a class="icon" href="" target="_blank"><i class="fa fa-github fa-4x"></i></a></center>
</div>
</div>
<div class="col s3">
<div class="card-panel teal grey darken-1 center-block">
<center><a class="icon" href="" target="_blank"><i class="fa fa-twitter fa-4x"></i></a></center>
</div>
</div>
<div class="col s3">
<div class="card-panel teal grey darken-1 center-block">
<center><a class="icon" href="" target="_blank"><i class="fa fa-codepen fa-4x"></i></a></center>
</div>
</div>
</div>
</body>
CSS:
body {
background-image:url(https://s-media-cache-ak0.pinimg.com/originals/c7/5d/e1/c75de1208bf12c355ad1ba4264787b18.jpg);
background-size:cover;
color:white;
position:relative;
}
.card-panel {
display: flex;
text-align: center;
}
.icon {
text-align: center;
}
.fa {
position: relative;
}
.fa:hover {
color:white
}
Right now on desktop, the icons on my card panels remain offset to the left on each card:
https://i.stack.imgur.com/dWhix.png
The same is seen on mobile, except this time the icons are not only offset, but they're also not responsive to the width of each card panel:
https://i.stack.imgur.com/K0PS6.png
So in order to accomplish this formatting task, how would I be able to center each of the icons in alignment with each given card panel and make it responsive for varying screen sizes? Finally, can this be accomplished using properties that are already a part of HTML and CSS, or would I have to implement frameworks such as Flexbox or CSS Grid for this?
When I removed display: flex; from card-panel
.card-panel {
text-align: center;
}
It worked for me
I'm trying to adjust the glyphicon-user icon and btn-primary in dropdown to be displayed properly when the window is resized. However, when I resize the window, my button alignment seems to be out of the window where I can't view the end of the button. Answers anyone?
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<strong>User</strong>
</a>
<ul id="user-dp" class="dropdown-menu">
<li>
<div class="row">
<!-- Login -->
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Test</strong></p>
<p class="text-left">
Testing
</p>
</div>
<div class="bottom text-center">
Test again
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
style.css
.icon-size
{
margin-top:5%;
font-size: 87px;
}
#user-dp{
min-width: 300px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#user-dp .help-block{
font-size:12px
}
#user-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
Jamdev's answer is close, but it's your #user-dp that sets the min-width. This will keep your box 300px wide no matter the window size. By adding the following CSS, you will reset the min-width to 0 whenever your window is under 768px wide.
#media (max-width: 768px) {
#user-dp {
min-width:0;
}
}
Demo: http://www.bootply.com/GetuidWvdM
add this code into your custom.css #media (max-width: 767px) .navbar-nav .open .dropdown-menu { min-width:0; }
I have three .well items on my homepage, and I don't want to fill them with content just to ensure they size correctly on every screen. Ideally I'd like a CSS solution that can specify their height and width match each other regardless of which screen they are being displayed on (and also that they stack correctly when the window shrinks.
/* CSS used here will be applied after bootstrap.css */
#benefit-box-1 {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-box {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-box-3 {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-row-2 {
margin-top: 1px;
}
.icon-div {
display:inline-block;
text-align: centre;
vertical-align: bottom;
width: 100%;
height: 100%;
}
.icon-div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="benefit-row">
<div class="col-md-4" id="benefit-box-1">
<div class="well">
<div class="icon-div">
<i class="fa fa-users fa-4x"></i>
<h1>Collaborate in your sales meetings.</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box">
<div class="well">
<div class="icon-div">
<i class="fa fa-map-signs fa-4x"></i>
<h1>Direct your team to the best deals</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box-3">
<div class="well">
<div class="icon-div">
<i class="fa fa-filter fa-4x"></i>
<h1>Trust your pipeline forecast</h1>
</div>
</div>
</div>
</div>
<div class="row" id="benefit-row-2">
<div class="col-md-4" id="benefit-box-1">
<div class="well">
<div class="icon-div">
<i class="fa fa-bullseye fa-4x"></i>
<h1>Helps you target the right contacts</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box">
<div class="well">
<div class="icon-div">
<i class="fa fa-graduation-cap fa-4x"></i>
<h1>In-built sales training</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box-3">
<div class="well">
<div class="icon-div">
<i class="fa fa-line-chart fa-4x"></i>
<h1>Smash your sales targets</h1>
</div>
</div>
</div>
</div>
</div>
I made a bootply here: My attempts
I managed to solve this issue by dropping the wells/bootstrap standard responsive behaviour and adopting some of my own using the Flex methods. If anyone is interested here's the bootply: Flex CSS classes to make responsive pages
I used the info present here in order to make this work - standard behaviour on my boxes is to have 33% of the screen width on large devices, 50% on medium devices and 100% on small devices. Works a charm.
From what I can tell it's not going to be very useful on older browsers (I don't particularly care for my project) but on modern browsers it works just as planned.
I have an administration screen with a sidebar. Everything works well except that the main content does not fill the browser width. I have tried many options but I am unable to solve this puzzle. Your help and advise is appreciated
Here is my HTML
<!-- top navigation menu element -->
<div id="wrap">
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav nav-sidebar">
<li id="departments">
<i class="fa fa-fw fa-sitemap"></i> <span>Departments</span>
</li>
<li id="permissions">
<i class="fa fa-fw fa-key"></i> <span>Permissions</span> </a>
</li>
</ul>
</div><!-- .col-sm-3 .col-md-2 .sidebar-offcanvas -->
<div class="col-sm-9 col-md-10 main">
<!--toggle sidebar button-->
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
</p>
<h1 class="page-header inline-page-title">Groups</h1>
<!-- main content -->
</div><!-- .col-sm-9 .col-md-10 .main -->
</div> <!-- .row .row-offcanvas .row-offcanvas-left -->
</div><!-- .container-fluid -->
</div> <!-- #wrap -->
And my CSS
body {
padding-top: 50px;
background-color: #f5f5f5;
}
.main {
padding: 20px;
background-color: #fff;
border-left: 1px solid #dae3e9;
height: 100%;
box-shadow: -3px 3px 3px -2px #f1f1f3;
}
.sidebar-offcanvas {
min-height: 100%;
}
A clearer image showing the gap on the right side -
Found the problem - it was this piece of CSS that was causing the issue. I removed it and it works well - however leaving me with another problem. How do I constrain the width of my left side navbar without losing the responsive nature? Any suggestions are appreciated.
#media only screen
and (min-width : 1200px) {
.sidebar-offcanvas {
width: 180px;
}
}