Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am working on a website which needs to have two headers. The second header holds the social icons (facebook, twitter, linkedin, google plus) and next to them I have this heading:"Fast Social Login>>" .
Initially, with the css, I pulled them to the right. I am using the 'collapse' and 'navbar-collapse' classes for the heading because I don't want it to be shown on smaller screens. However, when this heading collapses, I want the social icons to be centered on the navbar.
Can this be solved with CSS adjustment or do I need to write scripts?
HTML:
<div class="navbar navbar-inverse navbar-static-top header-bottom-border">
<div class="container">
<img src="img/googleplus.png" class="social-position pull-right">
<img src="img/linkedin.png" class="social-position pull-right">
<img src="img/twitter.png" class="social-position pull-right">
<img src="img/facebook.png" class="social-position pull-right">
<div class="collapse navbar-collapse">
<h2 class=" navbar-text pull-right" style="color: #b0b0b0">FAST SOCIAL LOGIN>></h2>
</div>
</div>
</div>
CSS:
.header-bottom-border{
border-width: 0 0 5px 0;
border-color: #4c9322;
}
.social-position{
width: 3em;
height: 3em;
display:inline-block;
margin-left: 10px;
margin-top: 10px;
vertical-align: middle;
}
Have you tried using text-align: center with media query?
See the exact width when your navbar-collapse collapses, and write a query for that width.
#media (max-width: width-when-navbar-collapses) {
.container {
text-align: center;
a {
float: none;
}
}
}
Try this:
#media (max-width: width-when-navbar-collapses) {
.container a{
display: block;
width: 100%;
}
.container a img {
display: table;
margin: 0 auto;
}
}
Yes, this is possible by only using CSS, more specific, by using media-queries
Looking at the Bootstrap-source for the navbar, they use a media-query with a specific variable to change the behaviour of the navbar depending on the device-width:
#media (min-width: #grid-float-breakpoint)
Using a mobile-first approach, what you would need to do is set the social icons to be centered per default and override this using this media - query that targets the minimum width and above.
This could be achieved with something like in this example:
.navbar .container {
text-align: center;
.pull-right {
// you probably need to override these in here
float: none;
}
#media (min-width: #grid-float-breakpoint){
text-align: start ;
.pull-right {
float: right;
}
}
}
In case you're not using LESS (or any other preprocessor) and you have the compiled version of bootstrap in your project, the default-value of #grid-float-breakpoint is 768px, as defined here in the source
Related
I am using ReactJs to learn to build a site
<div>
<div className = "Home">
<div className = "wrapper">
<div className= "one" >
<img src={image} alt="clock" height = '590px' width='590px'></img>
</div>
<div className="two">
<center>
<p>Perfect tool to get your </p>
<p> service on <mark className = 'ser'>Word</mark></p>
</center>
<div className = 'btn_see'>
Explore
</div>
</div>
</div>
this is the code on js page
and here is css code for div:
.wrapper {
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 200px;
padding: 10px;
}
.one {
float:left;
margin-right:20px;
width:50%;
border-right:2px solid #000;
}
.two {
overflow:hidden;
margin:10px;
border:2px dashed #ccc;
min-height:170px;
}
/*mobile*/
#media screen and (max-width: 800px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
while on desktop, it works as intended but on mobile, it should go one below the another which it does not instead it stacks on one another is something wrong with my code.
How it should and is looking on desktop
side by side div
How it should look on mobile but isn't
top bottom div in responsive
is something wrong with my code, please help I am new.
I'm not seeing any element with ID one in your html, so i'm assuming you want to select the class name, in which case your selector in the media query should be .one as you've written above and not #one. # is used to select IDs . is used to select classes.
There are different approaches to make this happen.
1. Flex Box System
2. Grid System
Hint: You can do it with flex box and when it turns into its mobile version, all of the blocks must be in a horizontal direction.
You can use either Grid or Flex. They are both ways to make a layout responsive and with a lot of features that will make this task easy. Below is a snippet on how you could make it stack on mobile using flex. Also, here's some references on both grid and felxbox. Use whichever seems more fitting to your needs:
Grid: grid
Flexbox: Basic concepts of flexbox
#wrapper{
display: flex;
flex-direction: row;
}
#one {
background-color: #808080;
}
#two {
background-color: blue;
}
#wrapper div{
min-height: 200px;
padding: 10px;
}
#media screen and (max-width: 800px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="one">
I'm the first
</div>
<div id="two">
I'm the second
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want the burger to show up when my screen size is lesser than 1023px.
It is not happening only when using media query
.burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media only screen and (max-width: 1053px) {
.burger {
display: block;
}
}
<button
type="button"
class="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
But the burger icon is not appearing although I've tried creating burger from span and I tags
This seems to work perfectly for me when testing on codepen. Can you check how your stylesheet is connected in your HTML document, as in this piece of code.
<link rel="stylesheet" href="stylesheet.css"></link>
In the <head> section of your html document. I have a feeling that it might not be connected.
EDIT
html
<button
type="button"
id="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
CSS
#burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media screen and (max-width: 1053px) {
#burger {
display: block;
}
}
There's a solution on js -
codepen.io/skovtun/pen/VwLvXPB
Can't make an analog for Angular8+.
I need the center block to have a fixed width (1200px), and it is evaluated and compressed by the left, right and both sidebars immediately when they are opened. They should not overlap with the content.
I seen content overlapping when closing sidebars. May be you want to stop overlapping during open and close sidebar. It can be fixed by css. You can use transition in .wrapper class. see bellow code:
.wrapper{
height: 100%;
transition:all .25s;
}
You can achieve this with pure CSS.
You haven't specified what the requirements are, but you can use flexbox like the below example to achieve a max-width main container flanked by 2 compressing sidebars.
body {
margin: 0;
}
.wrapper{
display: flex;
}
main {
width: 1200px;
padding: 20px;
background-color: #f1f1f1;
}
.sidebar {
flex-grow: 1;
height: 100vh;
padding: 0 15px;
}
.sidebar-left {
border-right: 1px solid #06A52B;
}
.sidebar-right {
border-left: 1px solid #06A52B;
}
<div class="wrapper">
<aside class="sidebar sidebar-left">
<h2>Left sidebar</h2>
<p>Add content here</p>
</aside>
<main>
<h1>Max width of this block is 1200px</h1>
</main>
<aside class="sidebar sidebar-right">
<h2>Right sidebar</h2>
<p>Add content here</p>
</aside>
</div>
You Can Dynamic every css class Using [ngClass] Depending on your logic ..it will render when the value will change..
I have two main buttons which each contain child buttons detail, on desktop everything works fine. I want for each parent sub buttons to be displayed below its parent, here what I have so far:
HTML
<div class="main-data">
<div class="main-data_butttons">
<div class="main-data_button-left">Trump</div>
<div class="main-data_button-right">Babab Yaga</div>
</div>
<div class="main-data-buttons-left_details">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
<div class="main-data-buttons-right_details">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
</div>
On the desktop looks something like this:
I want it to look like this on mobile:
On mobile two buttons are displayed when you click one of them it display hidden data all of this I managed to do but I can't figure out to make those sub buttons to display under each main button, right now everything is displayed below two main buttons, any help will be appreciated
Personally i'd rearrange that DOM a little so those main buttons were in blocks with its content. This way u can control the behavior with CSS better. You define the looks from the lowest resolution and progress your way up.
on low resolution you're basically done
on higher resolutions (defined by #media (min-width: 600px)) you float the main blocks next to each other
you can even add more blocks on higher resolutions, if you want, with another media query, for example #media (min-width: 1200px) and make .main-data { width: 33.333333% } and so on
The point is, it's not easy to rearrange DOM in CSS. At least not in your case. You can use javascript of course, but you would need some changes in DOM anyway.
var $mainDataButton = $('.main-data-button');
$mainDataButton.on('click', function() {
$(this).next().toggle();
});
* { margin: 0; padding: 0; }
.main-data-button,
.main-data-buttons div { display: inline-block; margin: 5px; border: 1px solid purple; padding: 10px; background: #fafafa; }
.main-data-button { padding: 30px; }
.main-data-buttons { display: none; }
#media (min-width: 600px) {
.main-data { float: left; width: 50%; }
.main-data-buttons { display: block !important; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-data">
<div class="main-data-button">Main button left</div>
<div class="main-data-buttons">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
</div>
<div class="main-data">
<div class="main-data-button">Main button right</div>
<div class="main-data-buttons">
<div class="main-data-buttons_details-first">Test</div>
<div class="main-data-buttons_details-second">Test</div>
<div class="main-data-buttons_details-third">Test</div>
<div class="main-data-buttons_details-fourth">Test</div>
</div>
</div>
I have a horizontal, 930px wide menu, that stretches across the whole width of a page on <768px resolution. At the moment, only the inline anchor tags are clickable, but I found out it is quite impossible to make the whole li clickable while mantaining 'responsivness'. I've tried numerous solutions, right now I am using display:table on the ul, display:table-cell on the li and a JS to make it stretch across the whole container. Works great on <768px, but at 930px, paddings inbetween anchor and their li containers become uneven. Screenshot and code below. (last menu item has display:none and is there because of the mobile menu version, please ignore it)
So, is there a way to have anchor paddings as percentages of the width of the UL? If not, how can I solve this?
HTML:
<!-- Responsive menu -->
<nav class="btn1content btncontent main-menu-wrapper hidden">
<ul class="main-menu" align="right">
<li class="item cyan">Úvod</li>
<li class="item orange active">Aktuality</li>
<li class="item yellow">Domény</li>
<li class="item brown">Registrátori</li>
<li class="item blue">CMS & Frameworky</li>
<li class="item pink">Trendy</li>
<li class="item green ">Zoznam</li>
<li class="item sand">Sledovanie domén</li>
<li class="item darkgray">Kontakt</li>
<li class="item item-last"></li>
</ul>
<!-- Clear -->
<div class="clear"></div>
</nav>
CSS:
.main-header .main-menu-wrapper {
margin: -3px auto;
width: 100%;
display: table;
border-collapse: collapse;
position: static;
height: auto;
background: #ffffff;
border-top: none;
border-bottom: none;
}
.main-header .main-menu-wrapper .main-menu {
display: table-row;
}
.main-header .main-menu-wrapper .item {
text-align: center;
border-top-style: solid;
border-top-width: 3px;
border-left: none;
border-right: none;
height: auto;
display: table-cell;
padding: 0;
width: auto;
}
.main-header .main-menu-wrapper .item a {
padding: 42px 0;
}
Screenshot (up - what it looks like now, below - what it should look like)
p.s. can't post pictures yet
http://i.stack.imgur.com/An4hh.png
Demo is up on
http://statistikydomen.magnetica-hosting.sk/tmpl/index.html
Change this:
.main-header .main-menu-wrapper .item a {
padding: 42px 0;
}
To this:
.main-header .main-menu-wrapper .item a {
display: block;
}
That will make your anchors fill out to the width of their parents (the li elements).
The table-cell display of those li will make the browser calculate a propert width for each item. Those widths might vary a little, based on the length of the captions and possibly even the browser/version, but I wouldn't worry too much about that. Responsive isn't always pixel perfect. Any way, you will get a quite nice division of the elements and the anchors will fill the entire width of the li, making the whole menu area clickable.
PS:
Formally you will have to write & in CMS & Frameworky as &.
You don't need the 'clear' div if you implement one of the tricks
described here: http://css-tricks.com/snippets/css/clear-fix/