Backend dev here learning front. I am trying to hide an element on small and medium screens and visible on the rest of the screens.
But the thing is when I do sm:hidden it hides the element for small screens and above. And when I try to do sm:hidden md:visible the element is not visible on medium screens and above. How should I go about this?
As we can read in official docs :
By default, Tailwind uses a mobile-first breakpoint system
Then In Your case on small breakpoint hidden and visible on Large lg breakpoints and above :
<div class="hidden lg:block">
<!-- ... -->
</div>
Example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="hidden lg:block">
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</div>
</body>
</html>
Related
Might be a simple fix but I am wondering why my background-image for my hero section isn't showing?
according to the documentation, applying w-full and h-full with bg-cover will at least show the image. The only solution to this would be to add a position: absolute class to it. I am wondering why that is? The documentation does not say to add an absolute class but that seemed to solve it but I would like to know why (its confusing the heck out of me lol)
<!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/tailwind.css">
<title>Document</title>
</head>
<body>
<div class=" w-full h-full" style="background-image: url('https://images.unsplash.com/photo-1624542316074-5ce16f7b6d41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80');">
<div></div>
</div>
You should give the div some height with some content like text or use the tailwind utility h-{something} dont use h-full as it is the same to css height: 100%; if you want it to fill the screen use the utility class h-screen see the snippet below
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="w-full h-screen" style="background-image: url('https://images.unsplash.com/photo-1624542316074-5ce16f7b6d41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80');">
<div></div>
</div>
I'm working on a react js project where I'm using the mdbootstrap, I'm trying to build a component similar to this
the first picture is for desktop and another is for mobile users
So, I was trying to achieve something similar and I started playing with bootstrap classes but couldn't achieve this in my react project. But to my surprise in my project, the columns are not taking full width. Why is it happening and what can I do?
Here's it working fine in normal HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8" style="background-color: red;">
One of two columns
</div>
<div class="col-sm-4" style="background-color: yellow;">
One of two columns
</div>
</div>
</div>
</body>
</html>
Check this code on JsFiddle.
Here's the link for my react js project and the component is profile.js you can check it through navbar: https://codesandbox.io/s/dawn-flower-iqcuz
Here's what I'm getting
This is what I want
Your example code is right so it does not help in solving the problem.
I suspect that you used right class container-fluid (max-width: 100% - 100% of the parent not 100% of the viewport) but this wrapper is placed in another div with a class container (max-width: 1200px).
If so your container-fluid is limited by container and behaves like it because max-width:100% is equal 1200px.
I have this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="visible-xs-block">visible-xs-block</div>
<div class="visible-sm-block">visible-sm-block</div>
<div class="visible-md-block">visible-md-block</div>
<div class="visible-lg-block">visible-lg-block</div>
</div>
</div>
</div>
</body>
</html>
When I run this on mobile, my phone recognise this as SM, but should as XS.
In this case, I can't see mobile menu with hamburger (code not include) and when I have div with xs-12 and sm-6 it displays wrong.
On PC works everything.
How can I recognise phone (XS size) correctly ?
Put the meta tag in head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
If the problem persist after adding:
<meta name="viewport" content="width=device-width, initial-scale=1">
Try with
<div class="hidden-lg hidden-md hidden-sm col-xs-12">visible-xs-block</div>
instead of
<div class="visible-xs-block">visible-xs-block</div>
Anyways, your code was working fine for me.
You have already tried with google chrome inspect? In the latests version you can select various device type and brand. In this way you can test at different resolution.
The solution it's not always correct, but is a good approximation.
https://developer.chrome.com/devtools/docs/device-mode
What is the main difference between these two keywords in blade, I found that they do same thing, but... The syntax is different, but whats the main difference?
I am using #yield, and #include, but didn't figure out, which is better to use?
I want to extend my CSS styles, I want to load css styles when needed, for example i want to separate styles and options to navbar and separate css styles to my footer defined in navbar.css, footer.css, i want to include in my main.blade.php, but footer isn't allways visible?
How to solve this? Do I think wrong, and its better to put all css to one file?
What about performance?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Authentication system</title>
{{--custom css--}}
#yield('css')
{{HTML::style('css/bootstrap.min.css')}}
<!-- Custom styles for this template -->
{{HTML::style('css/navbar.css')}}
</head>
<body>
#if(Session::has('global'))
<p>{{Session::get('global')}}</p>
#endif
#include('layout.navigation')
#yield('content')
#yield('layout.footer')
and footer
#extends('layout.main')
#section('css')
#parent
{{HTML::style('css/footer.css')}}
#endsection
#section('footer')
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<
</div>
</div>
</footer>
#endsection
My code doesn't work.
Instead of
#yield('layout.footer')
write
#include('layout.footer')
This should solve your problem.
I'm pretty new to Bootstrap 3. I'm having issues with the grid system: http://getbootstrap.com/css/#grid .
Everything works well below 992px. In other words, <728 px my two divs stack, >728 px they are horizontal. However, above 992px they stack AGAIN. My aim is that my two divs only stack for "Extra small devices Phones (<768px)". Not for bigger screens.
This is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class ="container">
<div class ="row">
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
</div>
</div>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
EDIT:
Have a look at the images, please. It's not working for me (neither in FF nor in Chrome).
Picture one works.
Making the screen wider, it starts stacking:
Add classes below to each of your blocks, that have to be stacked one under another in small version.
col-lg-6 col-sm-12
col-lg-6 says:
Make block 50% width in LG and smaller dimensions
col-sm-12 says:
Make block 100% width in SM and smaller dimensions
Zoom. It's expected behavior. Zoom would change your page_width/element_width ratio.
So you will get other breakpoint usually after zooming.