I have a little problem here;
Here's my code :
.big-header {
font-size: 120px;
font-weight: bolder;
color: #fff;
text-align: left;
padding-left: 139px;
}
#media (max-width: 480px) {
.big-header {
font-size: 40px;
}
}
Everything works the way I want it to, but there's a real smoothness problem, I mean is there a way for the font-size to resize smoothly as the width is down? When I resize my window it goes directly from 120px to 40px. Is there a way font-size could slowly decrease?
Thanks a lot!
Add a css transition to both the type and when the type shrinks: transition: all 2s;
Sample: http://jsfiddle.net/chfhd5L0/3/
.big-header {
font-size: 120px;
font-weight: bolder;
text-align: left;
padding-left: 139px;
transition: all 2s;
}
#media (max-width: 480px) {
.big-header {
font-size: 40px;
transition: all 2s;
}
}
<p class="big-header">Hello</p>
Related
I have a message bar that is hidden unless the server responds with a message to render something (e.g. "The password and username are invalid."). Then it eases in from the top to display the message.
In latest versions of Chrome, Edge, Safari, and Firefox, this is working fine. In IE, it flies up from the bottom of the browser, across the viewing area, and then mounts where it should be when it is viewable.
This is the Sass that I have. I've been toying with the transform and transition to get the correct results, without affecting other browsers. I not been able to, so looking for suggestions:
#messages {
z-index: 999;
position: fixed;
width: 100%;
.container {
max-width: 890px;
#media (max-width: 992px) and (min-width: 768px) {
max-width: 720px;
}
#media (max-width: 767px) and (min-width: 576px) {
max-width: 510px;
padding-left: 0px;
padding-right: 0px;
}
}
a {
color: #FFF;
font-weight: bold;
}
i {
cursor: pointer;
padding-top: 3px;
}
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-5vh);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
.hide-messages-bar.show-success-messages-bar {
background-color: $green;
transform: translateY(0vh);
padding: 8px 0;
}
.hide-messages-bar.show-error-messages-bar {
background-color: $red;
transform: translateY(0vh);
padding: 8px 0;
}
}
arbuthnott got me pointed in the right direction. It turns out px works as well so I used that instead. Was having a hard time getting % to behave the same as it did in other browsers.
Used this tool to translate vh to px:
https://jsfiddle.net/Dwaaren/j9zahaLL/
And ended up with this:
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-22.3px);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
The 0vh on the other two classes apparently wasn't doing anything so left that as is. Now all major browsers perform similarly.
I have 8 boxes on my html file, when viewing on the desktop, everything looks OK, visited on the mobile and the colums are way off than it should be, it should be in the center, not in the right side, how would i do that to make it responsive?
Preview
My code for the columns.
.articles {
margin: 100px;
background-color: #F5F5F5;
}
.article {
margin: 5px;
display: inline-block;
width: 340px;
position: relative;
float:left;
left: 155px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}
.article-image {
width: 100%;
}
.article-text-wrapper {
padding: 20px;
}
.article-title {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 700;
}
.article-description {
font-family: 'Roboto', sans-serif;
line-height: 16px;
font-size: 16px;
color: rgba(0,0,0,0.7);
font-weight: 300;
}
.article-time {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: rgba(0,0,0,0.4);
font-weight: 300;
}
Thanks alot.
You have left and margin properties applied to your article elements. You will need to add a media query for the following:
#media only screen and (max-width:700px) {
.articles {
margin: 50px 0;
}
.article {
left: 0;
width:100%;
}
}
The problem is that your article has fixed width, float and is displayed as inline-block.
Try by adding the following media query:
#media only screen and (max-width : 768px) {
.article {
margin: 0 auto;
display: block;
width: 100%;
max-width: 340px;
float: none;
left: auto;
}
}
When making responsive web pages, add the following element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Set CSS width property is set to 100% for images, the image will be responsive and scale up and down. And also use max-width property.
For better responsive design use Media Queries.
#media screen and (max-width: 800px) {
.class-name {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
Refer here
I've been trying to create a button which would have its font size increased if it's hovered. And it works, but the problem is that the box itself becomes bigger when the font becomes bigger. One solution could be to have a fixed height, but I need it to stay as auto.
But once the font size changes, the box height won't change automatically anymore and instead would stay the same size.
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
Set the line-height of the font size so it would stay the same even the font is change.
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
line-height: 16px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
You can achieve this simply, by adding line-height: 20px; to #btn
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
line-height: 20px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
Can you wrap it in a fixed size div? One way or another, it seems you'll need to fix a bounding container (either the button itself or a div).
Alternately, you can get a similar effect by increasing the font while simultaneously decreasing the padding.
Try this Thomas!
#btn {
width: 40%;
/* setting a height would fix this, but it must be auto */
padding: 10px;
background-color: #00A859;
transition: font 0.5s ease-in;
font-size: 16px;
line-height: 22px;
}
#btn:hover {
font-size: 22px;
}
<div id="btn">Hover me!</div>
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 have the following two media queries:
#media (min-width: 320px) and (max-width: 359px){
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 0.5em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 10;
line-height: 0.5em;
color: inherit;
}
.hero-unit {
background: url("../img/now320.jpg");
height: 5em;
width: 15em;
padding: 0.5em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 0.5em;
color: inherit;
}
}
#media (min-width: 360px) and (max-width: 479px) {
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 1em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 50;
line-height: 1em;
color: inherit;
}
.hero-unit {
background: url("../img/now360b.jpg");
padding: 1em;
margin-bottom: 2em;
height: 10em;
width: 18em;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 1em;
color: inherit;
}
}
I'm trying to figure out why the 320 width rule is not being applied at all to my HTML page, even though I've resized it using the responsive design tool in Firefox to have a width of 320px.
I checked the CSS styles using Firebug to see what's going on. I only see the #media (min-width: 360px) and (max-width: 479px) part being applied. That is, its not a case where the CSS rule I think should be applied is being overwritten. What's happening is the rule is never applied at all. Why?
Sometimes browsers just simply don't allow for a viewport to be smaller than a certain size, and I think that line is down around 360, so it may simply not be registering, even with the tool you mention. I can't say, because I'd need to see the live example.
Have you checked the site on an actual mobile device, or at least an emulator? The Opera Mobile Emulator is pretty easy to use.
As an aside, if you want to work mobile first - there is the idea of writing your CSS for 320 devices first, with no media query, as the 'baseline' experience. That is where you specify font families, colors, generally applied styles. Then you add in media queries to work on larger and larger sizes, and that is where you specify changes in layout and text size. The point being - don't wrap your 320-359 styles in a media query as it will be the basic experience for everyone.
If you wish the 320px rule to be applied for all the page you need to write it like this
#media (min-width: 320px)
without any and (min-width....) after it