Simple Responsive Text

Size
2,282 Kb
Views
60,720

How do I make an simple responsive text?

What is a simple responsive text? How do you make a simple responsive text? This script and codes were developed by Fabrizio Bianchi on 07 August 2022, Sunday.

Simple Responsive Text Previews

Simple Responsive Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Responsive Text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="responsive-wrapper"> <div class="responsive">No man is an island.</div> <div class="responsive">The pen is mightier than the sword.</div> <div class="responsive">You can't make an omelet without breaking a few eggs.</div>
</div>
<div id="help">Resize The Window</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Responsive Text - Script Codes CSS Codes

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|Droid+Serif);
.responsive { white-space: nowrap; display: inline-block;
}
/* Example Stuffs */
body { background: rgb(214, 209, 182); margin: 40px;
}
.responsive:nth-child(1) { font-family: 'Lobster'; }
.responsive:nth-child(2) { font-family: 'Droid Serif'; }
.responsive:nth-child(3) { font-family: 'Shadows Into Light'; }
#help { position: absolute; bottom: 40px; width: calc(100% - 80px); text-align: center;	font-family: sans-serif; opacity: .5; font-weight: 200;
}

Simple Responsive Text - Script Codes JS Codes

var responsive = function() { $(".responsive-wrapper").each(function(){ var width = $(this).width(); $(this).find(".responsive").each(function(){ $(this).css("font-size",200); while($(this).width()>width) { $(this).css("font-size","-=1"); } }); });
}
$(document).ready(responsive);
$(window).resize(responsive);
//You may also like Plugin
alsolike( "LwlqI", "100 followers jelly cake!", "nKCsI", "Semantic Sandwich", "vlrnd", "CSS Only iPhone 6"
);
Simple Responsive Text - Script Codes
Simple Responsive Text - Script Codes
Home Page Home
Developer Fabrizio Bianchi
Username fbrz
Uploaded August 07, 2022
Rating 3.5
Size 2,282 Kb
Views 60,720
Do you need developer help for Simple Responsive Text?

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!

Fabrizio Bianchi (fbrz) Script Codes
Create amazing captions 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!