I want my borders to be on top for mobile like devices and on the left for others.
It's working on mobile but for others it's adding the properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-l-lg">
</body>
</html>
Since you are adding rounded-t-lg without a prefix, it takes effect on all screen sizes.
To hide the top border on screens at the sm breakpoint you will have to add sm:rounded-t-none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-t-none sm:rounded-l-lg">
</body>
</html>
Related
i trying to build this layout with tailwind css but i can't figure out
layout i want to create
my layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/dist/output.css" />
<title>Document</title>
</head>
<body
class="font-Rubik grid grid-cols-[80px_minmax(400px,_1fr)_250px] grid-rows-2 h-screen"
>
<nav class="bg-slate-800 row-span-2">nav</nav>
<menu class="bg bg-violet-700 col-span-2 text-white">Menu</menu>
<section class="bg-slate-300">Inbox</section>
<main class="bg-slate-300">Email view</main>
<aside class="bg-slate-300">Additional info</aside>
</body>
</html>
To achieve this, you can mix the grid and flex systems. For the grid you can adjust the individual column widths in the config. i have taken 25/50/25.
https://play.tailwindcss.com/WqVvubeWsT
yo can do it this way to
grid-cols-[80px_400px_1fr_250px]
just need add (_) between ich size
I have read a post, link here: Render-tree Construction, Layout, and Paint
A demo page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No JS</title>
<link rel="stylesheet" href="http://127.0.0.1:3000/static/css/style.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
The Performance Panel:
Enlarge the red part:
As you see, there is no step of Render-tree Construction.
Why? Does the post wrong or the Render-tree Construction part is in Recalculate Style?
This snippet with 'spaces' around the tilde does not work.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does not work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
This snippet without the spaces does work.
h3~p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Undo will revert to not working whereas when I put 'new' blank spaces around the tilde it works.
h3 ~ p {
color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>
Since CSS in general has the power to make me want to tear my hair out it would be nice if someone could help me avoid these kinds of problems.
It's because you have a non-breaking space right after the tilde in your first example. It appears if you accidentally press option+space instead of space.
Read more here
The errors like this is a real headache sometimes!
this is App1 image:
this is App2 image:
note: this webpage runs in a same device(my phone with Android 5.1)
source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
<title>Document</title>
<style>
html,body{font-size:62.5%}
.div1{
font-size:2rem;
}
.div2{
font-size:20px;
}
</style>
</head>
<body>
<div class="div1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（2rem）</div>
<div class="div2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（20px）</div>
</body>
</html>
I have a ReactJS website recently deployed on Heroku, and believe I have what's needed for a website to be mobile responsive, yet the website just looks exactly how it should look like if it were to be viewed on a desktop. Everything is extremely small when viewed on mobile.
What could be the issue?
Here is the HTML:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script></body>
</html>
Maybe the content extends past the container, like images or something. Try this to see if that's the case:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>