I'm making a blog with nextjs and I want to show or hide TOC(Table of Contents) responsively.
I'm using tailwindcss but the reaction is too slow.
Is there a solution?
This is my code
<div className={`invisible xl:visible`}>
<TableOfContents />
</div>
Problem
Can you try with display (none xl:block) parameters?
Related
I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.
I'm having some trouble with material design lite. I've made a page that looks great on a computer, but its not responsive at all. I'm using example code copied directly from the getmdl.io components page...and on that page everything looks great on a phone, but on my page it looks like a desktop only site (really small, hard to read). Any ideas what I could be doing wrong?
I have the same problem, i solved it in this form:
My Code Navbar Header of MDL:
<div class="mdl-layout mdl-js-layout">
Try with this form:
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
Greetz.
I was able to make the navbar collapse sooner using the CSS code from http://www.bootply.com/120604
How do I make the grid collapse or stack into 1 column sooner?
I only have two columns: col-sm-3 and col-sm-9. The responsive design works fine on mobile, but I would like to achieve the same behavior on tablets (768px to 991px).
I have to use Bootstrap CDN, so my only option is to override the default using CSS. Thanks.
No need to override the css, just use md in your col-*-# classes instead of sm. i.e.
<div class="col-md-3">Stuff</div>
<div class="col-md-9">More Stuff</div>
Then go to the bar, because you're done!
I am doing 2 responsive rebuilds on a site using Zurb Foundation with CSS and another with SASS . I am having trouble with the columns not displaying side-by-side in the SASS version, they seem to be going full width for every screen size.
For the SASS rebuild, I have copied all my files into the new directory structure that was created by the command line. I assumed it would be a case of porting my old files, plugging everything back together, watch the sass folder in the command line, output app.css and it would work. Everything has carried across fine except for the columns for some reason.
Correct CSS Version: http://enigmaweb.co.uk/creditlook/responsive-redesign/css/index.html
Broken SASS Version: http://enigmaweb.co.uk/creditlook/responsive-redesign/sass/index.html
The CSS version is exactly how I would like the site to look - does anyone have any suggestions at all?
Thanks in advance for the help.
Its hard to say exactly whats going on without looking at your SASS, but you do not have medium-4 defined in your app.css. You do have small-12 and large-4 classes defined. Once you get the medium-# classes defined your code should work fine.
agconti's answer does fix the issue, but remember "Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary". Once you get the medium-# classes defined you should be good to go. There shouldn't be a reason to add large-#, xlarge-#, or xxlarge-# as long as you want them to look like medium-#.
I hope that helps.
Your only specifying the small (iphone) and medium (tablet) views, but your viewing it from a large (desktop) view.
Add large-4 to your columns to make them work in the desktop view like so:
<div class="small-12 medium-4 large-4 columns">
<h2>Creditlook Lite</h2>
<div class="sprite icon1"> </div>
<p>Free entry-level, self-managed service to get you started.</p>
</div>
Then your div's will respond like your photo.
I'm new to css and have been getting by fine so far from going through tutorials and reading some of the great advice on this site but I just cant get my head around this one. I am trying to achieve a Polaroid effect using css and am getting some weird effects on my website. I have tested the code on jsfiddle and it works fine, I even copied the entire sites css and it still worked fine in jsfiddle. But as soon as I use that code on my website the margins, padding, rotation etc. are wrong.
Please help I'm at a loss here and don't know what could be affecting it, my only idea is that for some reason the css selectors I am using are not selecting the elements properly.
The site page is: http://kamhairandmakeup.co.uk/vintage/
The JSFiddle is:
<iframe width="100%" height="300" src="http://jsfiddle.net/deepwaterlizard/NxsUQ/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
or
http://jsfiddle.net/deepwaterlizard/NxsUQ/1/
I can post the css and html here if needed but didn't want to take up too much space, thank you in advance.
I am not entirely sure, but for starters, the first image (black and white) has this html on your site:
<p>
<!--the caption that appears below the image-->
<br>
</p>
after figcaption tag and its not present in your fiddle.
Looks like you are using Wordpress. Its editor will generate a lot of <p> tags, e.g. for each new line, it will generate <p> </p> or empty <p></p>