Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css">
</head>
<body>
<div class="container bg-green-400 md:bg-blue-400">
<p>Lorem ipsum</p>
</div>
</body>
</html>
When i go on developer mode on the browser and change the width the background color doesn't change at all. Can someone help me?
Add <meta name="viewport" content="width=device-width, initial-scale=1"> within head element.
Please check your config.js file and run this code to check does it works.
<div class="lg:px-20 md:px-10 px-0"><p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p></div>
Related
I am new to coding and I have some problem with referring to the right folder.
Here is my folder structure:
Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AGONEX GmbH</title>
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/fixed.css" />
</head>
<body>
<nav class="navbar navbar-dark fixed-top">
<a class="navbar-brand mx-auto" href="#"
><img src="/images/agonex.png" alt=""
/></a>
</nav>
<div class="video-background">
<div class="video-wrap">
<div id="video">
<video id="bgvid" autoplay loop muted playsinline>
<source src="/images/agonex.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
<div class="caption text-center">
<h1>Lorem</h1>
<h3>Lorem</h3>
<a class="btn btn-outline-light btn-lg" href="course">Lorem</a>
</div>
<!--- Start Course Section -->
<div id="course" class="row justify-content-center">
<div class="col-md-8 text-center">
<h1>Lorem</h1>
<p class="lead">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus,
rem ut quos ex quibusdam nisi!
</p>
</div>
</div>
<!--- End Course Section -->
<!--- Script Source Files -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<!--- End of Script Source Files -->
</body>
</html>
And now my page looks like this:
Can someone please help me referring to the correct folder.
Sry for the "easy" question but I would appreciate your help!
You'll want to move any files you need to reference in your HTML into your public directory. So, for instance, jquery-3.3.1.min.js should be moved to your public/js directory, instead of your top-level js directory (which may be invisible to the browser... though I can't say for sure without seeing the contents of your app.js file). The same goes for your bootstrap-4.3.1-dist directory-- you can move the entire directory into your public directory.
Then in your HTML code, you can reference your jQuery and Bootstrap source files like this:
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
I know that using conditional comments will work of IE browsers (Except IE10), but i want to know how to do same in Firefox and chrome.
Do i need to create different stylesheets for different browsers?
Please answer with a example of some small code, so i can get it well.
NOTE: I m not that good at javascript, so if answer is using javascript, please make some simple script.
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if IE]>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link href="IEStyleSheet.css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<div class="Container">
<header>
</header>
<nav>
</nav>
<div class="content">
<section class="main_articles">
<article class="siteDescription">
<div class="desImage">
</div>
<div class="des">
</div>
</article>
</section>
<aside class="side_article">
<div class="ads">
This is a Advertisement.
</div>
<div class="ads">
This is a Advertisement.
</div>
</aside>
</div>
<footer>
</footer>
</div>
</body>
</html>
Do I need to create different stylesheets for different browsers?
In general, no. Why do you think you might need to?
I have got following code snippet, where the widths of columns should be working, but somehow its not happening and both divs with column class are coming in next row.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="large-8 columns"> Hello </div>
<div class="large-4 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.
</div>
</body>
</html>
Your foundation.min.css link needs to have a rel="stylesheet" property to specify it is a stylesheet relationship. Otherwise it wont be used as one.
You are also missing a closing </div> on your large-8 columns line.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="small-2 columns"> Hello </div>
<div class="small-10 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.</div>
</div>
</body>
</html>`
In my html template, based on Zurb Foundation , I have following code:
<div id="top-bar">
<div id="top-bar-top-cont"></div>
<div class="row">
<div class="large-12 columns">
<p id="toplogo">
<h3>some text</h3>
</p>
</div>
</div>
</div>
When I check the code source, firefox warns me there is an issue with closing p tag, with red color.
In firebug source, I see it self closing p tag and div tags around it.
So, it doesnt display things properly.
Even when I pasted this snippet here, the editor showed red closing tags for p & outermost div.
Do I have error in this html?
Am I missing something?
This is my whole document:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div id="top-bar">
<div id="top-bar-top-cont"></div>
<div class="row">
<div class="large-12 columns">
<p id="toplogo">
<h3>some text</h3>
</p>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
You are getting this error because Firefox does not expect any heading tag like <h3> inside <p> tag. Therefore, when Firefox encounters the <h3> tag in your example, it automatically closes the <p> tag. You must put the <h3> tag outside <p> tag.
I'm planning to display a table with a large width, so I havent' founded a CSS o HTML code to display this table and can move in a horizontally way
The only part which should be with horizontal scrolling is in the center (the white color). Here is my defaul razor view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("MS. GARCIA MATH 7TH", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>...</nav>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
...
</footer>
#Scripts.Render("~/bundles/otf")
#RenderSection("scripts", required: false)
</body>
</html>
Set overflow to scroll
#body{
overflow-x: scroll;
}
Try overflow scroll
table
{
overflow: scroll;
}