I am trying to setup my layout on the mobile-first way. In the orange area here I have a link with class="logo". But for some reason the logo does not appear at all.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 bg bg-blue"></div>
</div>
<div class="row">
<div class="col-xs-12 bg bg-orange">
test
</div>
</div>
<div class="row">
<div class="col-xs-12 bg bg-white"></div>
</div>
<div class="row">
<div class="col-xs-12 bg efrat"></div>
</div>
</div>
And some relevant CSS
.bg-orange {
position: absolute;
top: 3%;
background-color: #f7942e;
height: 25%;
}
.bg-orange a.logo {
background: url(//placehold.it/480X91) no-repeat center;
text-indent: -9999px;
display: inline-block;
max-width: 100%;
}
For the full example please see: here
How can I achieve this?
Thanks
You need to show us some of YOUR's code... But for that. also you must display a as block or something similar for background:url work.
Use this
.bg-orange a.logo {
background: url("http://placehold.it/480X91") no-repeat center;
text-indent: -9999px;
display: inline-block;
width:480px;
height:91px;
margin: 0 auto;
}
Related
How can I center a div with 3 .profilebox elements on any screens? and make it responsive?
• Big screens: One row with my 3 elements
• laptop screens: Two rows (2 elements on the first row, 1 element below)
• Tablet and mobile: 3 rows with one element per row vertically align (centered)
You can check what I want here:
HTML:
<div class="container" style="max-width: 1300px;">
<div class="row">
<div class="centerDiv">
<div class="profilebox ">
<div class="profileInfo">
<h3 class="box-shadow">Errore Aethiopia dolorum amni</h3>
</div>
</div>
</div>
</div>
And I have 3 divs .profilebox rendering 3 boxes with my image + title.
CSS :
.centerDiv {
padding-bottom: 200px;
padding-top: 100px;
margin-right: 0 auto;
margin-left: 0 auto;
}
.profilebox {
width: 350;
height: 210;
cursor: pointer;
display: inline-table;
margin-bottom: 100px;
background-image: url("");
background-position: center center;
background-size: cover;
position: relative;
}
.profilebox .profileInfo {
bottom: 0;
height: 50px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 88%;
}
With this code, my box is well designed. My img and title are in the right place. The only thing now is to make it centered in any situation.
I am a beginner in web development, some things may not be meaningful in my code right now. thanks a lot for your help.
You can use CSS flexbox
.container{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.profile-box{
width:500px;
height:300px;
margin:20px;
border:2px solid #000;
}
.profile-box{
position: relative;
}
.profile-box p{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
}
<div class="container">
<div class="profile-box">
<p>profile box</p>
</div>
<div class="profile-box">
<p>profile box</p>
</div>
<div class="profile-box">
<p>profile box</p>
</div>
</div>
If you would like to use bootstrap, refer the following -
You could simply use the classes col-xl-4 col-lg-6 col-md-6 col-sm-12 as follows -
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
ProfileBox
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
ProfileBox
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
ProfileBox
</div>
</div>
</div>
You will finally get 3 elements on extra large screens, 2 on large & medium screens & 1 on small screens in each row.
To see it live with resizing, check it here.
Note: You don't need to worry about different browsers if you use bootstrap.
Here is the plunkr:
The issue is for this div
https://plnkr.co/edit/HHsReAT6GLyNZTF4qOJj?p=preview
<div class="main-page">
<div class="container">
<div class="row">
<div class="col-xs-6 welcome-text">Ankur Chavda</div>
<div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div>
</div>
</div>
</div>
You can see the css classes in plunkr.
Thanks in advance.
Remove the line height from:
.main-page {
background-color: #293b4d;
width: 100%;
height: 90vh;
/* text-align: center; */
/* vertical-align: middle; */
}
if you really want those two div elemnts to centered be to the main-page you can try this:
.main-page{
background-color: #293b4d;
width: 100%;
height: 90vh;
/* text-align: center; */
/* vertical-align: middle; */
position:relative;
}
.holder {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
And then add another div element with class named "holder" as a parent of the row like this:
<div class='holder'>
<div class="row">
<div class="col-xs-6 welcome-text">Ankur Chavda</div>
<div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div>
</div>
</div>
Hope that will work.
Here is a screenshot:
I'm trying to make a menu with bootstrap 3, I'm actually using code like this:
<section id="menu">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-2">
<img class="img-responsive" src="logo.jpg" alt="logo">
</div>
<div class="col-xs-12 col-sm-2 nana">
<p>Some other menu</p>
</div>
<div class="col-xs-12 col-sm-2">
<p>Some other menu</p>
</div>
<div class="col-xs-12 col-sm-2">
<p>Some other menu</p>
</div>
<div class="col-xs-12 col-sm-2">
<p>Some other menu</p>
</div>
<div class="col-xs-12 col-sm-2">
<p>Some other menu</p>
</div>
</div>
</div>
</section>
But I want to achieve this:
how can i put the lines , I use "border-bottom" property but it expands all the column, I just want to have the separations of each menu, if I apply margins it just broke the menu.
Is there a way to achieve this?
I'm thinking of using :before, :after,
But I don't know, anybody can help me!
You can use css ::after Selector for creating this type of thing.
.col-sm-2::after {
content: "";
position: absolute;
width: 90%;
height: 3px;
left: 0;
right: 0;
margin: auto;
background: #aaa;
transition: all .35s;
}
.col-sm-2:hover::after {
background: #68c122;
}
Here is a small fiddle to get started.
But I strongly suggest Using <nav class="navbar" role="navigation"></nav>
for a creating navigation.
Try playing with :hover pseudo class
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: green;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">Menu Text</li><!--
--><li class="two">Menu Text</li><!--
--><li class="three">Menu Text</li><!--
--><li class="four">Menu Text</li>
<hr />
</ul>
</div>
Simple Just add
margin-left: 2px;
margin-right: 2px; // change the values based on your requirement
for the menu items (in your case it will be the div to which you are adding border-bottom).
USE NAVBAR
But looking at your code I would like to suggest you to build your menu the correct way using bootstraps navbar component.
Read more about it here:
https://getbootstrap.com/components/#navbar
A common, modern design technique for responsive websites is to use a screen-height element as the above-the-fold content wrapper, and have all other content available below. Here's a good discussion on this technique. Here's a demo at CodePen:
#fullscreen {
width: 100%;
height: 100%;
display: table;
}
#fullscreen .fullscreen-content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="fullscreen">
<div class="fullscreen-content">
...
</div>
</div>
How can I make a Bootstrap 3 row behave in this manner?
I'm facing this challenge. Here's my current solution.
.full-ht {
height: 100vh;
position: relative;
}
.full-ht-content {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
margin-left: -15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row full-ht">
<div lass="col-xs-12 full-ht">
<div id="page-top-content" class="full-ht-content">
Above-the-fold content.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Other content.
</div>
</div>
</div>
Fiddle demo
I just started using Foundation and I like it a lot. I have a question. I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).
The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.
Is there a possible improvement that I could do to better integrate the logo into Foundation? In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?
HTML
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
CSS
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
position: relative;
}
.logo{
position:absolute;
left: 50%;
top: 20px;
margin-left: -100px;// half-width of logo
z-index: 20;
}
.box{
background-color: #333;
height: 120px;
margin-bottom: 10px;
}
If you know the height of the logo, you can use negative margin-top as well, but you'll probably have to wrap the 2 outer divs with a new div.
HTML:
<div class="outer">
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
CSS:
.outer {
width: 100%;
position:relative;
}
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
// position: relative; // REMOVED
}
.logo{
position:absolute;
left: 50%;
top: 50%;
margin-left: -100px;// half-width of logo
margin-top: -100px;// half-height of logo
z-index: 20;
}
You can do the following to make it center
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
DEMO
Is it the logo that doesn't resize? If so, try this:
.logo{
position:absolute;
left: 50%;
top: 20%;
margin-left: -100px;//half-width of logo
z-index: 20;
}
The logo should be able to resize now.