RESPONSIVE WEBDESIGN KURS. TEXTE RESPONSIVE MACHEN Create a Media Query Media Queries are a new technique introduced in CSS3 that change the presentation of content based on different viewport sizes. The viewport is a user's visible area of a web page, and is different depending on the device used to access the site. Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want. Here's an example of a media query that returns the content when the device's width is less than or equal to 100px: @media (max-width: 100px) { /* CSS Rules */ } and the following media query returns the content when the device's height is more than or equal to 350px: @media (min-height: 350px) { /* CSS Rules */ } Remember, the CSS inside the media query is applied only if the media type matches that of the device being used. Add a media query, so that the p tag has a font-size of 10px when the device's height is less than or equal to 800px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet cont libero a dui.

LÖSUNG

Lorem ipsum dolor sies diam, at aliquet velit libero a dui.

BILDER RESPONSIVE MACHEN Make an Image Responsive Making images responsive with CSS is actually very simple. You just need to add these properties to an image: img { max-width: 100%; height: auto; } The max-width of 100% will make sure the image is never wider than the container it is in, and the height of auto will make the image keep its original aspect ratio. Add the style rules to the responsive-img class to make it responsive. It should never be wider than its container (in this case, it's the preview window) and it should keep its original aspect ratio. After you have added your code, resize the preview to see how your images behave. freeCodeCamp stickers set freeCodeCamp stickers set LÖSUNG freeCodeCamp stickers set freeCodeCamp stickers set RETINA IMAGE Use a Retina Image for Higher Resolution Displays With the increase of internet connected devices, their sizes and specifications vary, and the displays they use could be different externally and internally. Pixel density is an aspect that could be different on one device from others and this density is known as Pixel Per Inch(PPI) or Dots Per Inch(DPI). The most famous such display is the one known as a "Retina Display" on the latest Apple MacBook Pro notebooks, and recently iMac computers. Due to the difference in pixel density between a "Retina" and "Non-Retina" displays, some images that have not been made with a High-Resolution Display in mind could look "pixelated" when rendered on a High-Resolution display. The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" is to define their width and height values as only half of what the original file is. Here is an example of an image that is only using half of the original height and width: A most excellent picture Set the width and height of the img tag to half of their original values. In this case, both the original height and the original width are 200px. LÖSUNG --- WARUM MUSS MAN ES DOPPELT EINGEBEN freeCodeCamp sticker that says 'Because CamperBot Cares' TYPOGRAPHIE RESPONSIVE MACHEN MIT VIEWPORTS Make Typography Responsive Instead of using em or px to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element. The four different viewport units are: vw (viewport width): 10vw would be 10% of the viewport's width. vh (viewport height): 3vh would be 3% of the viewport's height. vmin (viewport minimum): 70vmin would be 70% of the viewport's smaller dimension (height or width). vmax (viewport maximum): 100vmax would be 100% of the viewport's bigger dimension (height or width). Here is an example that sets a body tag to 30% of the viewport's width. body { width: 30vw; } Set the width of the h2 tag to 80% of the viewport's width and the width of the paragraph as 75% of the viewport's smaller dimension.

Importantus Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.

LÖSUNG

Importantus Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.

DISPLAY FLEX Use display: flex to Position Two Boxes This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept. Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page. Add the CSS property display to #box-container and set its value to flex.
LÖSUNG
Quincy Larson's profile picture

Quincy Larson

@ossia

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

1:32 PM - 12 Jan 2018
LÖSUNG
FLEXCONTAINER Use the flex-direction Property to Make a Row Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically. Other options for flex-direction are row-reverse and column-reverse. Note: The default value for the flex-direction property is row. Add the CSS property flex-direction to the #box-container element, and give it a value of row-reverse.
LÖSUNG #box-container { display: flex; height: 500px; flex-direction: row-reverse; } ROW AND EMBED Apply the flex-direction Property to Create Rows in the Tweet Embed The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property. This tells CSS to align the children horizontally. Add the CSS property flex-direction to both the header and footer and set the value to row. flex-direction: row; PROPERTY COLUMN Use the flex-direction Property to Make a Column The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a flex container. Add the CSS property flex-direction to the #box-container element, and give it a value of column. display: flex; height: 500px; flex-direction: column; PROPERTY JUSTIFY-CONTENT Apply the flex-direction Property to Create a Column in the Tweet Embed The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element would work well stacked as a column. Add the CSS property flex-direction to the header's .profile-name element and set the value to column. Align Elements Using the justify-content Property Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this. But first, there is some important terminology to understand before reviewing those options. Here is a useful image showing a row to illustrate the concepts below. Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the main axis. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items. There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container. Other options include: flex-start: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no justify-content is specified. flex-end: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container. space-between: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items. space-around: similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container. space-evenly: Distributes space evenly between the flex items with a full space at either end of the flex container An example helps show this property in action. Add the CSS property justify-content to the #box-container element, and give it a value of center. Bonus Try the other options for the justify-content property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge. background: gray; display: flex; height: 500px; justify-content: center; ALIGN Align Elements Using the align-items Property The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line. Flex containers also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal. CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container. The different values available for align-items include: flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container. flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container. center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items). stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no align-items value is specified. baseline: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on. An example helps show this property in action. Add the CSS property align-items to the #box-container element, and give it a value of center. Bonus Try the other options for the align-items property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge.