Fixed Width Element in Responsive Design

Developer
Wing-Hou Chan
Size
2,422 Kb
Views
10,120
  1. Fixed Width Element in Responsive Design Previews
  2. Fixed Width Element in Responsive Design HTML Codes
  3. Fixed Width Element in Responsive Design CSS Codes

How do I make an fixed width element in responsive design?

Fixed Width Element in Responsive Design.. What is a fixed width element in responsive design? How do you make a fixed width element in responsive design? This script and codes were developed by Wing-Hou Chan on 06 December 2022, Tuesday.

Fixed Width Element in Responsive Design Previews
IQ Test

Fixed Width Element in Responsive Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed Width Element in Responsive Design</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <div class="fixed-width small-12 columns panel"> <h1>Fixed Width Element</h1> <p>Bacon ipsum dolor sit amet venison kevin pastrami, meatloaf rump meatball fatback. Pork loin jerky pancetta, jowl pork belly porchetta filet mignon meatloaf. Meatball spare ribs short ribs tri-tip bresaola, boudin ribeye corned beef kielbasa strip steak tail chuck doner rump ball tip. Sausage bacon turkey andouille pork loin. Porchetta chicken jerky tri-tip biltong frankfurter. Brisket tongue turducken, pancetta jowl tenderloin strip steak chicken ground round frankfurter porchetta meatloaf shankle. Bacon ribeye tongue beef ribs meatball ground round ball tip rump drumstick spare ribs tri-tip.</p> </div> <div class="small-12 columns fixed-width-left"> <h1>Responsive Element</h1> <p>This solution works by taking the fixed-width element out of the document flow so the responsive element does not push the fixed-width element off the page. Padding can then be applied to the responsive element to make sure the content is not covering or being covered by the fixed width element. The padding is the width of the fixed-width element plus approximately 10px.</p> <img src="http://placehold.it/1000x300" /> <p>Leberkas meatloaf andouille aliqua labore short loin, sed pancetta. Exercitation irure enim, leberkas esse pastrami nostrud non shank adipisicing culpa filet mignon pancetta. Shank sirloin pork chop est dolor officia excepteur pastrami cupidatat capicola in nostrud dolore in ea. Laboris turkey nulla rump, drumstick pig dolore ball tip meatball anim. Porchetta shank enim labore aute, salami nostrud beef magna turkey short loin ut irure excepteur. Adipisicing anim ea sirloin short loin, nisi capicola pig.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js'></script>
</body>
</html>

Fixed Width Element in Responsive Design - Script Codes CSS Codes

.row
{ padding: 10px 0;
}
@media only screen and (min-width: 500px)
{ .fixed-width { position: absolute; width: 350px; } .fixed-width-left { padding-left: 360px; }
}
img
{ margin: 10px auto;
}
Fixed Width Element in Responsive Design - Script Codes
Fixed Width Element in Responsive Design - Script Codes
Home Page Home
Developer Wing-Hou Chan
Username winghouchan
Uploaded December 06, 2022
Rating 3.5
Size 2,422 Kb
Views 10,120
Do you need developer help for Fixed Width Element in Responsive Design?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Wing-Hou Chan (winghouchan) Script Codes
Name
How to use Orbit with background images
Stop Page Jumping To Top When Sticky Topbar Menu Icon Is Clicked
Confirm Close Of Foundation Reveal Modal
Custom Close ZURB Foundation Reveal Modal With Image
Custom Close Foundation Reveal Modal
Source Ordering Columns and Mobile-First
Mega Menu Experiment 2
Opening Reveal Modal On Document Ready
ZURB Responsive Table
Full Screen Orbit With Background Image
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!