some days ago i saw a webside where the text (padding-left: 5%) glided to another position when i resized the window. normally the position is changed "hard" (means when i make the window 100px wider, the position is 5px more away from left), but there it really glides to this new position.
first i thought it would be a js library, so i tried deactivating javascript, but even after this it worked, so i think it must be css-based? has anybody a hint how can i make this too?
In order to do this with purely css you need to use media queries and css transitions.
Here is an example: jsfiddle (Try resizing the results pane quickly)
The key parts:
.gliding-text {
padding-left: 0px;
transition-duration: 1s;
}
#media (min-width: 200px) {
.gliding-text {
padding-left: 10px;
}
}
#media (min-width: 500px) {
.gliding-text {
padding-left: 100px;
}
}
The media queries act as breakpoints for when the transitions are applied. In the example I made the padding-left property is changed when the window is 200px-499px and then again when the window is 500px+. This triggers the padding-left property to change and the css transition is applied. This is a simple example of the technique you described.
Checkout media queries and css transitions
Related
For the mobile version of my page there are white spaces in between the images that I can't seem to remove.
When I inspect the coding and toggle the min-height on and off it goes away:
#media only screen and (max-width: 1024px)
.edgtf-section.edgtf-parallax-section-holder:not(.edgtf-full-screen-height-touch), .touch .edgtf-parallax-section-holder.edgtf-parallax-section-holder-touch-disabled:not(.edgtf-full-screen-height-touch) {
height: auto !important;
min-height: 400px;
}
Website: Creationflame.com
min-height:initial;
This sets it back to what it was originally.
The initial CSS keyword applies the initial value of a property to an
element. It can be applied to any CSS property, including the CSS
shorthand all.
PROBLEM:
I'm currently working on a from-pdf template; I'm relatively new to responsive design and am having an issue with the following: I have a button at the bottom of the page that I'm currently centering using a set margin-left value. However doing so prevents that button from 'floating' all the way to the left during screen re-size.
GOAL:
Have a solution that allows the button to be horizontally centered during 'full size' browser, but collapse and float all the way to the left when the browser size is decreased.
TRIED:
Setting padding/margin
Setting both of the above to auto
Thought about a horrible conceptual ghetto hack (I could technically make the image a long white rectangle with the button centered then make the image fluid, thus re-sizable)
WEBSITE IN QUESTION (OBJECT: ORANGE BUTTON NEAR FOOTER):
http://thedma.org/the-state-of-data/
Here you have a working fiddle
The trick is:
a {
display: block;
text-align: center;
}
img {
max-width: 100%;
}
assuming that a selects the link corresponding to the button and img is your image.
You want to use media queries for this. Specifically viewport-height or viewport-width from the sounds of things.
Link to documentation.
Basic idea:
#media (max-height: 600px) {
.bottom-button {
/* styles */
}
}
#media (min-height: 600px) {
.bottom-button {
/* different styles */
}
}
I can use the following CSS to make something happen if the browser width is less than 800px.
#media only screen and (max-width : 800px)
{
#content
{
width: auto;
}
}
Is there a way to make some CSS happen to a certain element if the height of that specific element is greater than a certain value?
My goal is to have special CSS trigger if the contents of an elements starts to wrap because of too narrow browser width, without being dependent on a hard coded max-width.
More specific example
<h2>Long title followed by <span class="subtitle">a subtitle</span></h2>
.subtitle
{
margin-left: .7em;
font-size: .6em;
}
#media only screen and (max-width : 600px)
{
.subtitle
{
vertical-align: super;
&:before
{
content: '\A';
white-space: pre;
}
}
}
What I need is that the .subtitle should get vertical-align: super if it wraps to another line than the rest of the title. I currently do this manually when the browser shrinks to a certain width, but the problem is that some headers are longer than this and I'd like it to happen automatically whenever a header wraps, independent of the browser width.
Media queries unfortunately only work relative to screen size (and a few other screen based properties). What you require is something the lines of the proposed 'Element Query'.
This is a common problem in CSS. One solution is to detect a change in height on the container (the <h1> in your example). It would have to detect against a hard coded pixel value and when greater than that threshold toggle a class.
You have the added complication that the change in CSS you require will affect the height of the very container you are testing against, possibly creating a circular loop of test and change. This is one of the most difficult challenges of 'Queries on Elements'.
I've got an image that has 90% width, but with a max width of 640px. I want to set a specific style when the max width is reached. So, I was thinking about a style that is applied depending on the width. Here there's a similar question:
CSS targeting specific images
But I don't have a width attribute. How can I achieve this (without using js, if possible)?
To further user3127242, you can use media queries to add landmarks where the image should change. In order to effectively change the image source, you should also consider using a div with background-image set. Example:
HTML:
<div id="fancy"></div>
CSS:
#fancy {
background: transparent url(...) 0 0 no-repeat;
width: 400px
}
#media only screen and (min-width:400px) {
background-image: url(image1.jpg);
}
#media only screen and (min-width: 500px) {
background-image: url(image2.jpg);
}
Example fiddle here: http://jsfiddle.net/27UjQ/2/
The only way without js of which I can think is using mediaQueries. Doing the math I calculated the size of your image will be 640px, when the screen's resolution is 1064. Therefore you will need to add this mediaQueries code to your css, which changes the img's style when this resolution is reached
#media only screen and (min-width:768px) {
/* Your changes to the image's style */
}
Here's a link. Try resizing the window to see the changes when the certain width is reached.
It would be great if you could provide us with a working example or your code.
But try the following:
img {
width: 90%;
max-width: 400px; /* just an example */
}
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}