I got problem with 2 elements from my header since 3 days,and cannot fix it.The problem is there that my "Search-trigger" which is my search icon and "tablet-icon" which is icon which is showing only on given browser width,are overlapping.Even search icon is going beyond tablet icon when browser is really tiny width.I tried with Float:right,leftand position:absolue,relative on both elements ,overflow:auto on site header,margin:left,righton elements and display properties on both elements display:block ,display:inline-block; Nothing works... i don't know where is the problem..
/***********************************************
Header Style
************************************************/
.admin-bar .site-header {
top: 32px;
}
.admin-bar .site-header.is-fixed {
top: -47px;
}
#media screen and (min-width:640px) and (max-width:790px){
.admin-bar .site-header.is-fixed{
top :-44px;
}
}
#media screen and (min-width:413px) and (max-width:783px){
.admin-bar .site-header{
top: 35px;
}
}
.site-header {
position: absolute;
top: 0;
left: 0;
right:0;
height: 80px;
z-index: 4;
border-bottom: 1px solid #eee;
}
/***********************************************
Search menu style
************************************************/
.search-trigger {
position: absolute;
right:0.5em;
top: 30px;
width: 40px;
text-align: center;
cursor:pointer;
cursor:hand;
display:inline-block;
}
#media screen and (min-width: 40em) {
.search-trigger {
right: 0.8em;
}
}
#media screen and (min-width:783px){
.search-trigger{
top:26px;
}
}
.search-trigger:before {
width: 100%;
display: block;
font-family: "ElegantIcons";
font-weight: normal;
text-align: center;
content: "\55";
/***********************************************
Icon Style
************************************************/
.tablet-icon{
position: absolute;
display:inline-block;
left:90%;
top: 23px;
width: 40px;
float:right;
}
.tablet-icon:before{
width: 100%;
font-size:1.6em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\61";
}
<header id="masthead" class="site-header" role="banner">
<span class="tablet-icon"></span>
<a id="search-trigger" class="search-trigger"></a>
</header>
That happens when you use position:fixed, position:absolut, and z-index. You have to change this in your media queries for each resolution.
When I have resizing issues I replace as many px sizings as I can with %. That way when the screen resizes, the elements resize proportionately. i.e. Change out things at 50px with 5%
Well i make the positions on my elements INSIDE the "" element to relative and float:right; and left my position of<header>to absolute,and it worked like a magic.
Related
My button's text leaks out of the container if I zoom it. When I zoom the button's text flows out of the container. What I want is for it to adjust its font size and stay in the container and don't leak out.
.wrapper a {
position: relative;
display: block;
width: 8.5vw;
height: 7vh;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #05386b;
border: 2px solid #05386b;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
.wrapper a span {
position: relative;
z-index: 2;
}
.wrapper a:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: #EDF5E1;
transition: all .35s;
}
.wrapper a:hover {
color: #8ee4af;
}
.wrapper a:hover:after {
width: 100%;
}
<div className="wrapper">
<Link to="/orders"><span>Returns <br/> <b>& Orders</b></span></Link>
</div>
You could take a look at the #media css rule. It can be used to create responsive webpages.
For example the following increases the font size by 2 pixels if the screen size is smaller than 786px.
#media only screen and (max-width: 786px) {
.wrapper a {
font-size: 20px;
}
}
To prevent the content from overflowing all together you might want to take a look at the overflow css property. It controls the way content overflows from the containing area. Might not be applicable to your case though as you are talking about making a button here.
I have a text in the header that I would like to center on smaller screens but I have tried various options and it's not working. Could someone point me in the right direction? Thanks in advance for your help.
Edit: added more code. If I add "width:70%" to .name, it aligns it to the center on some iphones but not others.
body {
margin: 0;
background-color: #e9e9f3;
}
/* Header */
.header .name {
position: absolute;
top: 0.5em;
left: 1em;
margin-left: 4%;
color: white;
font-size: 2em;
font-family: 'Archivo', sans-serif;
}
.social-icon-header {
position: absolute;
top: 3em;
right: 2em;
height: auto;
}
/* Tablets and under */
#media (max-width: 768px) {
* {
box-sizing: border-box;
}
body {
margin: 0;
text-align: center;
}
/* Header */
.social-icon-header {
display: none;
}
.name {
display: flex;
text-align: center !important;
justify-content: center !important;
width: 70%;
}
<div class="hero">
<!--Header-->
<div class="header">
<h2 class="name">Name</h2>
<a class="social-icon-header" href="https://www.tiktok.com" target="_blank">
<i class="fab fa-tiktok fa-2x"></i>
</a>
</div>
</div>
Try to add width: 100% to the name class, so it would take 100% width of the parent container.
.name {
text-align: center !important;
justify-content: center !important;
width: 100%;
}
You have to change the positioning of .name in the media query and set text-align: center for .header. In this way you can change the whole layout for screens with a different size (like in your example a maximum of 768px).
Just make sure that you reset other values that you set before (outside the media query, like top, left and margin-left for .name) that you don't need for other screen sizes. You also forgot to close media query tag.
Also beware of the fact that it's good practice to design css mobile first and then use media queries for bigger screens. https://www.browserstack.com/guide/how-to-implement-mobile-first-design
If you replace you css with the following it'll work:
body {
margin: 0;
background-color: #e9e9f3;
}
/* Header */
.header .name {
position: absolute;
top: 0.5em;
left: 1em;
margin-left: 4%;
color: white;
font-size: 2em;
font-family: 'Archivo', sans-serif;
}
.social-icon-header {
position: absolute;
top: 3em;
right: 2em;
height: auto;
}
/* Tablets and under */
#media (max-width: 768px) {
.social-icon-header {
display: none;
}
.header {
text-align: center;
}
.header .name {
position: relative;
left: auto;
top: auto;
margin: 0;
}
}
i coded my portfoliowebsite myself and my code probably is a mess because i don't have that much experience with code.
The problem i'm having is to make the website responsive so it's also looking good on the phone.
I think the problem is that i used px instead of %, but i tried various stuff and it doesn't look like i want. The website is https://www.jessewensing.com
I'll post a part of the code.
.content {
width: calc(100vw - 30%);
position: relative;
left: 30%;
margin-top: -6%;
}
.menu-header {
font-family: 'Akkurat';
text-align: left;
}
.project-nav {
margin-top: 20px;
font-family: 'Akkurat';
}
img {
cursor:s-resize;
-webkit-filter: drop-shadow(5px 5px 5px #A9A9A9);
filter: drop-shadow(5px 5px 5px #A9A9A9);
top:-2%;
margin-top: 10%;
width:50%;
}
ul {
list-style-type: none;
text-align: left;
left:3%;
margin-left: 0;
padding: 0;
position: fixed;
}
a {
text-decoration: none;
color: black;
color:red;
}
p {
top: 10px;
right:3%;
font-family: 'Akkurat';
position: fixed;
z-index: 2;
}
p.naam {
top:10px;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.contact {
top:76%;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.cv {
top:80%;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.text {
margin-top: 106px;
right:3%;
font-family: 'Akkurat';
color:red;
}
</style>
This is how i want it to look when using the phone
https://jsfiddle.net/f51xjnzu/
Making the website responsive occurs mainly in the stylesheet (css), using % will help instead of px or em, wrap your elements in div containers to help keep elements align when accessed from a smaller device/screen.
You will have to resize certain elements or even hide them at specific screen sizes using similar code to below:
#media
only screen
and (min-width : 1024px) {}
Check this website for more details:
https://seesparkbox.com/foundry/structuring_a_responsive_stylesheet
Hope this helps, good luck!
So I'm trying to recreate the following layout for a lab: http://i.imgur.com/T24vvGu.jpg
I've started by tackling the navigation bar. I set the position to absolute so I can give it a top: 50px; property to move it down 50px from the top.
I tried to then set the logo's position to relative, so that relative to the navigation bar, I can move it 20px from the left or so. But when I use relative positioning, the logo sits inside of the navigation bar and makes the navigation bar's height bigger.
I thought that by setting the logo's position to relative, it would treat the logo as if it's not a part of the navigation bar. However, that's not the case. So what I did was I also set the logo's position to absolute. This entire thing is just killing my soul. For some reason I can't wrap my head around how to do this.
I went to web archive, and looked up spigot design's website. What they did, was they set the navigation bar's position to fixed, and the logo to relative. I tried doing this as well but the logo would still sit inside the navigation bar and extend it's height.
Furthermore, I have to set the logo to sit in the middle of the navigation bar when the browser is 768px and below. And then, two menu links sit to the left of the logo, and the other two menu links sit to the right of the logo. I'm completely lost at how to do this. I don't think I'd have a problem with the rest of the layout. It's just this navigation bar and logo positioning that's driving me insane.
Here is my code: http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323
Should I upload my code with the logo images as well? That may make it easier to follow. I'm not sure what the best practice is as I'm new to stack overflow.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lab Eight</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- navigation bar left -->
<div class="navbar">
<div id="logo"></div>
<div class="container">
<ul class="float-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="column-twelve">
</div>
<div class="column-twelve">
</div>
</div>
</div>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #332929;
}
#logo {
background: url('images/logo-left.png');
display: block;
width: 250px;
height: 100px;
position: absolute;
left: 15px;
top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
color: #f2f2f2;
}
.column-twelve h2 {
font-size: 1.875em;
}
.row .column-twelve p {
color: #f2f2f2;
font-weight: 400;
font-size: 0.875em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
width: 90%;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.navbar {
position: absolute;
width: 100%;
min-height: 58px;
top: 50px;
background: #fefefe;
}
.navbar li {
position: relative;
display: inline;
list-style: none;
}
.navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
/* The row for the columns. */
.row {
margin-right: -15px;
margin-left: -15px;
}
.column-twelve {
width: 100%;
}
.column-eleven {
width: 91.66666667%;
}
.column-ten {
width: 83.33333333%;
}
.column-nine {
width: 75%;
}
.column-eight {
width: 66.66666667%;
}
.column-seven {
width: 58.33333333%;
}
.column-six {
width: 50%;
}
.column-five {
width: 41.66666667%;
}
.column-four {
width: 33.33333333%;
}
.column-three {
width: 25%;
}
.column-two {
width: 16.66666667%;
}
.column-one {
width: 8.33333333%;
}
#media screen and (max-width: 768px) {
#logo {
position: absolute;
margin: 0 auto;
background: url('images/logo-center.png');
height: 146px;
width: 250px;
}
}
Here you go: http://codepen.io/n3ptun3/pen/avrXaE?editors=110
To complete this, I positioned the #navbar relative to its normal position. Then I absolutely positioned the #logo and #container (from their first positioned ancestor element, i.e. #navbar.)
The height issue comes from setting min-height: 58px; on .navbar. Instead, you want to use height: 58px;.
FYI--when using media queries, it is best practice to write your code mobile first. This means writing your code for the smallest screen first. In order to do this, you must use min-width instead of max-width. Also, you want to use #media only screen, instead of #media screen. This targets only browsers that can understand media queries.
Hope this helps. Feel free to ask any questions about the code in the comments section.
HTML
<div id="page">
<div id="navbar">
<div id="logo"></div>
<ul id="container">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
#page {
height: 600px;
}
#navbar {
position: relative;
width: 100%;
height: 50px;
top: 75px;
background-color: #fefefe;
}
#logo {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #333;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
}
#container {
position: absolute;
top: 13px;
padding: 0;
margin: 0;
width: 100%;
}
#navbar li {
display: none;
}
#navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
position: relative;
left: 100%;
}
#media only screen and (min-width: 569px) {
#navbar li {
display: inline-block;
list-style: none;
width: 20%;
float: left;
text-align: center;
}
}
#media only screen and (min-width: 769px) {
#logo {
left: 50px;
transform: translate(0);
}
#container {
width: 30%;
right: 50px;
}
#navbar li {
width: 25%;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
left: 0;
}
}
EDIT:
In response to your additional questions:
:nth-child() is a pseudo-class selector. It selects the child that is the desired ordinal (i.e. 1st, 2nd, 3rd, 4th, 5th, etc.) of its parent. The ordinal is designated by the number in parentheses. So if you look at my code, you'll see li:nth-child(3). This means: select all li elements that are the 3rd child of their parent. If the 3rd child isn't an li element, it will NOT be selected.
In regards to your media query question: The reason I placed the left: 50%; transform: translate(-50%); code outside of the media query, is because I'm using the mobile first method of coding. Mobile First design is the current standard for responsive design. It means that you are designing for the smallest screen (mobile) first. So, I am centering the logo, and removing the text links, outside of the media query. Then I target the tablet in my first media query: #media only screen and (min-width: 569px). This targets screens that have a resolution of 569px or higher, and adds the text links in the nav bar. Finally, I use another media query: #media only screen and (min-width: 769px) to target larger screens (computers), with a screen size of 769px or higher. In this media query, I position the logo on the left and the text links on the right.
NOTE: In your code, you are using desktop first design. You are designing for the large screen first. Then you use media queries for smaller sizes. That's why your media query uses max-width. I'm using mobile first design. I am designing for the small screen first. Then I use media queries for larger sizes. That's why my media query uses min-width.
Hope this helps!
I'm using Bootstrap and I have a carousel under my navbar.
It works OK on normal computers, check this link.
However, I'm having trouble on smaller screens, e.g. iPhone. Just resize your browser screen to see what I mean.
I'm figuring maybe it isn't necessary the responsive CSS but something else I' doing wrong. Maybe their are better ways to get the carousel image with resized on every screen.
Also, I would like the carousel to have a 100% height of the screen, so the carousel spans the entire screen, and the rest of the content shows only when you scroll.
CSS I'm using:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-top: -80px;
position: fixed;
width: 100%;
}
.carousel .container {
position:relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
min-height: 800px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: auto;
margin-top: -200px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption2 {
background-color: transparent;
position: static;
max-width: 380px;
padding: 200px 20px;
}
.carousel-caption h1,
.carousel-caption .lead,
.carousel-caption2 h1,
.carousel-caption2 .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn,
.carousel-caption2 .btn {
margin-top: 10px;
}
#wrapper-container {
margin-bottom: -80px;
padding-bottom: 80px;
position: relative;
background: inherit;
top: 60%;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
}
.carousel .item {
min-height: 500px;
}
.carousel img {
min-width: 100%;
height: auto;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
#media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
There's a lot you would need to do to clean it up... The following will get you started, but there would definitely be a bit more tweaking to do.
I didn't look at the CSS to fill the screen with an image as per your last request. I think you will have to look at adding a different carousel with other cropped images with a portrait aspect ratio if you want that, so you show the specific part of the image you want.
Firstly under #media (max-width: 767px), remove:
.navbar-inner {
margin: -20px;
}
It's causing your menu bar at the top to shift up out of sight.
From #media... .carousel, remove:
margin-left: -20px;
margin-right: -20px;
This is messy, and is there because of the padding added to body (see below).
Add the following to #media (max-width... .carousel:
position: relative;
margin-top: 0px;
Because you want the carousel to sit neatly under the navbar.
Remove the following from #media... body
padding-right: 20px;
padding-left: 20px;
This is causing problems for the carousel, and you can add this padding for specific divs like wrapper-container if you want.
From .carousel img, remove:
margin-top: -200px;
Next, you have to fix the fact that the text under the carousel is moved way down:
Add the following to #media... #wrapper-container
top: 0;
Remove the following from #media (max-width: 979px)
.carousel .item {
min-height: 500px;
}
and the following from #media (max-width: 767px)
.carousel img {
height: 300px;
}
because the carousel is nowhere near that height at smartphone sizes.
You will also have to play around with the positioning of the caption text in the #media CSS. You may want to decide to lose some caption text as the carousel shrinks.
This will get you started, and you can go from there...
For starters, get rid of the margin-top: -200px; on your .corousel img style.
With a small screen, your image height is less than 200px and this causes it to go off of the screen.