The problem is, that I'm trying to keep my header just stay at the top, when scrolling into other pages (inside) and when i'm selecting some of the other pages (with a lot of text) which makes scroll -> appear, the header jumps a little bit, which is annoying.
I tried text-align into a parent div and display: inline-block; into secondary. Tried to do the div relative and with left px etc but that makes it very unresponsive.
.header {
text-align: center;
}
.header h1 {
display: inline-block;
font-size: 77.2px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 76px;
text-transform: none;
font-family: "Great Vibes", cursive;
}
.content {
margin: 0 auto;
width: 960px;
top: 20px;
z-index: 0;
padding: 20px;
}
The only way i actually can get it as i want is to set a wrapper with display: inline-block; and text-align: center with left: right 50 % and positio relative; looks as follows, problem is it doesnt really center and it's not responsive for bigger screens etc:
.header {
display: inline-block;
}
.header h1 {
text-align: center;
left: 50%;
right: 50%;
position: relative;
font-size: 77.2px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 76px;
text-transform: none;
font-family: "Great Vibes", cursive;
}
It can be possible that there is an element (most commonly an image or video) that is wider than 100%. This causes somehow to screw things up a bit when having a fixed or sticky header. Try setting the max-width of the problematic element to 100%.
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
I am coding CSS from scratch for the first time and I am getting a lot of trouble to make it the perfect way.
As you can see in this image, the blue menu in the top has a white border.
My current css code for nav is:
nav, footer {
font-family: "rogue-sans-ext", sans-serif;
font-style: normal;
font-weight: 700;
border-width: 0px;
padding: 0px 0px 0px 0px;
}
nav {
background-color: #005EFF;
width: 100%;
position: static;
top: 0;
left: 0;
text-align: center;
font-size: 25px;
}
By the way, I can't figure out how to center vertically the text of the nav items. I have tried the vertical-align option, the line-height method and the absolute positioning and negative margin, but none seems to work properly.
Thanks,
mikeysantana
Probably, your problem is given by the default body padding value applied by browser.
Try applying this style:
body, html {
margin: 0;
padding: 0;
}
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
My entire AngularJS website is reponsive. It is responsive to the screen size & loads the same pages for mobile, desktop, and tablet. However, I am having trouble getting the navbar to be a separate height on different devices in a responsive way.
Mostly, I just want the navbar to load at a slimmer height on mobile so that more of the screen space can be utilized for actual content that the user wants to see.
Right now, I am setting the height variable in variables.less which is where I know how to alter navbar height settings currently.
Variables.less
// Basics of a navbar
#navbar-height: 64px; // most relevant line!
#navbar-margin-bottom: #line-height-computed;
#navbar-border-radius: #border-radius-base;
#navbar-padding-horizontal: floor((#grid-gutter-width / 2));
#navbar-padding-vertical: ((#navbar-height - #line-height-computed) / 2);
#navbar-collapse-max-height: 340px;
#navbar-default-color: #gray-light;
#navbar-default-bg: #fff;
#navbar-default-border: transparent;
OK, so that is great, but I want 64px height to be set for desktop/tablet but 38px height to be set for navbar height on mobile screens.
I have already tried over-riding the navbar height in my local CSS with a media query but even with the !important flag it is not working to set the navbar to another height.
App.less <-- this doesn't work :(
#media (max-width: 767px) {
.navbar {
height: 35px !important;
}
.navbar-collapse ul li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
.navbar-brand li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
}
NOTE I am using Bootstrap 3. Also, if it makes any difference, Bootstrap is imported in the main app.less file like so: #import "bower_components/bootstrap/less/bootstrap.less";
What should I do? How can this be done in a responsive fashion?
(A.K.A. without making an entirely different site for mobile)
Thanks for all the help!
Based on comment above, I suggest you set min-height to 35px in your media query
.navbar {
min-height: 35px;
}
I think what prevents you to set the height is the min-height property set to the element with class navbar.
Adding min-height: 35px would be enough:
#media (max-width: 767px) {
.navbar {
height: 35px;
min-height: 35px;
}
...
Try the following syntax:
#media only screen and (max-width: 767px) {
.navbar {
height: 35px !important;
}
.navbar-collapse ul li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
.navbar-brand li a {
line-height: 35px;
height: 35px;
padding-top: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
}
I am trying to have the main container of my site to center automatically when the explorer window is bigger, or to stick to the left whenever the explorer window is narrowed.
How would I achieve that with CSS?
Most sites do it nowadays, bloomingdales.com for example.
When you make your browser smaller, the main container stays on the left, and as soon as you open your browser on the right side, the main container automatically gets centered.
Thanks!
My site: www.tahara.es
ADDING CSS:
body {
margin: 0 auto;
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer
{
position: absolute;
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer
{
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
This should do it:
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer {
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
View on JSFiddle
The key is that there is no position: absolute; on your div. That property removes the element from the normal document flow, such that it has no parent element. margin: 0 auto; determines the left and right margins from the parent element. Putting two and two together, you can see that they're incompatible.