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
Related
(I have extensively searched for a solution but nothing that has happened to someone seems to be the problem)
I am a beginner working on a very simple project. I uploaded it to github but github pages won't show the CSS. It works just fine when I run it locally.
It's supposed to look like this:
snapshot of the project
This is the repo: https://github.com/padnama/odin-recipes/
This is the pages link: https://padnama.github.io/odin-recipes/
Your wrongly refered your CSS in HTML :
<!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>receitas</title>
<link rel="stylesheet" href="./style.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
<img src="recipes/images/main.png" alt="the best cook">
<div class="writings">
<h1 id="title">receitas</h1>
<ul id="recipes">
<li>risotto</li>
<li>strogonoff de cogumelos</li>
<li>macarrão com amendoim apimentado</li>
</ul>
</div>
</div>
</body>
</html>
That should work better
Add the link of CSS file to your HTML page, see the attached picture below:
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?
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>
I have a mobile web application which has the following view-port.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
In one of the pages of our mobile web app, we are embedding another website using an iframe. This web application is not responsive and doesn't have a viewport meta tag in the head.
We wanted the embedded site's view to be without any initial-scale, but unfortunately, it is having an initial scale (may be 1.0) which attached to it. Looks like it's inheriting from the parent frame. Browser is not letting me to zoom out the iframe content. Both the parent and embedded webpage is in the same domain as well.
Below is the generated code from the browser.
<!DOCTYPE html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>title</title>
</head>
<body>
<!-- some content -->
<div>
<div class="iframe-wrapper">
<iframe frameborder="0" src="url ot the site>
#document
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
..
</head>
<body>
...
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
Would it be possible to have a different viewport for the iframe rather than reusing the one from the parent?
I've created a simple layout using grails default layout pattern.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>
</html>
Now so far as I understand the <g:layoutBody /> renders the body content. (Please correct me if I'm mistaken). Now I've applied custom styling to the <body> tag of each pages. But that styling is not being applied to my rendered view. Eg. I've an image which I want to apply to the body. But that is not being applied. When I insert a div inside the body and apply the same image to it, its getting applied to it.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mainLayout"/>
<title>Match List</title>
<script type="text/javascript" src="${resource(dir:'js',file:'matchDetailsJS.js')}"></script>
</head>
<body class="myclass"> </body>
</html>
My css file is getting included as my styling is being applied to other elements.
What am I missing? Is something wrong with my g:layout? I tried finding in the documentation but so far did'nt find anything much.
Let me know if my question is not clear.
Thanking you!!
I suspect this is because the layout needs to understand you have properties that you wish to supply for the body tag. The Grails documentation has a good example about using page property to specify an onload attribute of the body tag.
Here is the example modified for your needs.
layout
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer" class="${pageProperty(name:'body.class')">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>