So, I have this code:
<div className="bg-black font-serif pl-20 grid text-white !scroll-smooth">
<Head>
<title>MinimDays | Ultimate minimalism</title>
<link rel="icon" href="/plant.ico" className="fill-white" />
</Head>
<section id="home">
<div className="flex">
<span className="pt-72 mr-[400px]">
<h1 className="text-3xl ">MinimDays | Ultimate minimalism</h1>
<Link href="#about"><a className="text-lg hover:text-gray-400">About</a></Link> |
<Link href="#contactus"><a className="text-lg hover:text-gray-400"> Contact Us</a></Link>
</span>
<picture>
<img src="/photo.jpg" alt="photo" className="h-[480px] w-[320px] mt-[80px] rounded-xl border-white border-4"/>
</picture>
</div>
</section>
<section id="about" className="mt-20">
<h1 className="text-3xl mb-5">About Us</h1>
<hr className="mb-5"/>
<p className="text-lg">I like the idea of digital minimalism, but apps that satisfy this category are usually paid <br /> or have a free tier which is highly limited, so I said SCREW IT, <br /> and created my own! </p>
</section>
</div>
And the scroll animation does not work. I tried on Firefox Developer Edition and Chrome, but nothing seems to help. Any suggestions?
You need to add smooth-scroll to the html element. So add this to your main css file:
html {
scroll-behavior: smooth;
}
I managed to get smooth scrolling working with your example code with the above change, in an HTML version that I put together.
I haven't tested it in Next.js, but note the <Link /> is for navigation between pages. Not sure if that will cause problems for links within the page.
MDN Smooth Scroll documentation:
When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
Related
I've just started learning about reactjs and bulma.css. I'm trying to make a <footer> to stick to the bottom of the page using bulma's flexbox since I want to avoid writing my own css rules.
I already installed bulma using npm and imported bulma.css in the index.js like this
import "bulma/css/bulma.css";
but my code below still makes the <footer> to stick under the header..
<div className='container'>
<header className='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer className="has-text-centered is-flex-align-items-flex-end">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
The straightforward-bulma way would look something like:
Make sure the body and html are the full page height
Since this is every project-dependent, I've used the classic body { height: 100vh; } for now
The same for the container, it needs to be enlarged. Using the is-fullheight from the hero elements can be used (note: Consider using a hero instead of the container)
Give the footer a mt-auto which is short for margin-top: auto. This will force the footer to stick to the bottom of the page
html, body { height: 100vh; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<div class='container hero is-fullheight'>
<header class='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer class="has-text-centered is-flex-align-items-flex-end mt-auto">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
I am in process of making a small SEO library for my website. It's available as #peuconomia/react-meta-tags publicly.
Now, the library is working fine from my perspective. As <SummaryCard /> component is currently wrapped by one Fragment with 5 meta tags as children. Now, in Nextjs code below. I am trying to print the meta tags using the <SummaryCard /> component. But, the head will not render the component.
Nextjs documentation reports that the Head component will render inside it at most one Fragment deep component. The <SummaryCard> works fine when used on main, but not from Head.
How to make it work inside of <Head />.
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {SummaryCard} from "#peuconomia/react-meta-tags/lib/twitter";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<SummaryCard
title={'Title'}
description={'Nothing to see here'}
imageAlt={'Image of Pokimane.'}
site={'#peuconomia'}
imageUrl={new URL('https://google.com/image.jpg')}
key={'twitter'}
/>
<title>Learn to Code</title>
<meta name="description"
content="freecodeuniversity.com. A place to learn all about the web. We teach you all the programming language(s) including HTML*, CSS and Javascript. We also teach about both NoSQL and SQL databases."/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Learn to Code!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16}/>
</span>
</a>
</footer>
</div>
)
}
EDIT:
title, meta or any other elements (e.g. script) need to be contained
as direct children of the Head element, or wrapped into maximum one
level of <React.Fragment> or arrays—otherwise the tags won't be
correctly picked up on client-side navigations.
This is what Next.js suggests. It must be direct children of Head but is no problem if I add one Fragment to it as well. And, I am adding only one fragment to it at the moment.
I am using React, Redux and Bootstrap setup. I am building book website that have different tabs in that tabs are items(books) that have the same id through the different tabs. All my data is stored in a store and passed down to panel like so: TabsContainer(here I filter the books and pass down via props)->[All, Favorites, ...]->List of Books (all the same for every one) -> Book (all the same).
It is hard to post all the code and also basic concepts since I don't have idea what could be wrong. I instead post the result.
This is where it is ok. I can also fix the bug by resizing the window, but then it bugges the other 4 tabs.
This is clearly a bug. Bugg happens always when I move aways from inital tab.
What could be wrong? Should I set different keys? But if I understand correctly the react would do necessary rendering.
Update Found the root of the evil is the react Equalizer that I used to match column sizes (bootstrap responsive) so that button row appeared on the bot. I believe that has to do with incompatibility with React. So the problem now is how to put button row on the bottom of the panel.
<div className="col-md-12 col-lg-6">
<div className="panel panel-default no-padding">
<div className="panel-body contentRow" style={book_item.mainContainer}>
<Equalizer>
<div className="col-xs-12 col-sm-6" style={book_item.imageContainer}>
<div>
<FavoriteIcon reading={reading} style={book_item.favorites}
onFavoriteChanged={this.onFavoriteChanged}/>
<Link to={"readings/"+reading.id+"/edit"} params={{id: reading.id}} style={book_item.imageLink}>
<img
src={'http://smartbooky.hopto.org/media/images/books/' + reading.book.id + '.jpg'}
height="210px" style={book_item.bookImage}/>
</Link>
</div>
</div>
<div className="col-xs-12 col-sm-6" style={book_item.textContainer}>
<div className="bookTitle">
<strong>{reading.book.title}</strong><br/>
</div>
<div className="bookSubtitle">
{(() => {
if (reading.book.subtitle)
return (<div><em>{reading.book.subtitle}</em> <br/></div>);
})()}
</div>
<div className="bookAuthors">
<div>{authors ? authors : "Unknown author"}<br/></div>
</div>
<div className="bookDescription hidden-xs" style={book_item.bookDescription}>
{truncatedDescription.replace(/<\/?[^>]+(>|$)/g, "")}
</div>
<div className="bookTags hidden-xs row" style={book_item.bookTags}>
{reading.book.genre ? BookCard.renderTags(reading.book.genre) : void(0)}
</div>
<div className="buttonRow"
style={window.innerHeight > 400 ? book_item.buttonRow : void(0)}>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-remove" name="Remove" kind="primary"
handleClick={this.onReadingDelete} style={book_item.buttonRemove} />
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-th-list" name="Shelf" kind="primary"/>
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-edit" name="Edit" kind="primary"/>
</div>
</div>
</div>
</Equalizer>
</div>
</div>
</div>
Creator of react-equalizer here. It is possibly an issue with the equalization happening before the image is loaded. I just published a new verion that fixes this issue (1.0.5).
Here is a working example with react-bootstrap tabs:
http://jsbin.com/mayanakiqo/edit?js,output
class MyComponent extends React.Component {
render() {
let colStyles = {
float: 'left',
width: '50%',
padding: '10px',
background: '#ddd',
border: '4px solid white',
boxSizing: 'border-box'
}
return (
<div>
<Tabs defaultActiveKey={2}>
<Tab eventKey={1} title="Tab 1">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={2} title="Tab 2">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={3} title="Tab 3">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
</Tabs>
</div>
)
}
}
The other option would be to use flexbox to equalize the heights see https://codepen.io/imohkay/pen/gpard for example however it will depend on what browsers you need to support.
I think before answering this there are some things we need to know:
1. Do these Bootstrap tabs implement some sort of non-React JavaScript in terms of switching between them? I know that Bootstrap not only provides CSS files for installation, but it also can provide some JavaScript too to use some of its components.
2. I am guessing that in the pictures you posted, you are navigating from the Favorites Tab, to the All tab? If so, what SHOULD the All tab show? (It is possible that it is actually rendering the intended elements, and it is just the css that is making it look wrong.)
3. If the top two points are not the source of the problem, then we will need to see some code, at least for the render functions of the components involved, as well as what their states look like.
Hi all I am making my first responsive website.
I am doing it mobile first.
In my html I have given some elements which I do not want to be shown on mobile a class of mobile and those I don't want showing class of desktop
This is working brilliantly.
When I get to my tablet / desktop breakpoint and I reverse these to show the desktop menu for example, it is not working.
.desktop {visibility:visible;} .mobile {display:none;}
<div id="topbar">
<!--Mobile Nav-->
<section>
<div class="mobile container">
<div class="col12">
<div class="click">Menu</div>
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
<!--Desktop Nav-->
<section>
<div class="desktop container">
<div class="col12">
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
</div>
All you need to do is alternate the .mobile and .desktop classes to be display: block or display: none as and when you need things to be shown/hidden through out your break points.
You're confusing the use of display and visability in your current example
I have started using the Foundation 3 from zurb but my slider has slides with text on the left hand side and an image on the right (instead of just an image and a label on top of it).
When I decrease the size of the browser window it all fits except that the height of the slider.
What we need is to make the slider higher when on a small browser (it needs to be the same slider - not an alternative).
I know there's the fluid option in fluid slider and I suspect that if I change it, it will be enough to solve this problem.
How do I achieve that?
The following is my slider HTML code:
<div class="row">
<div class="twelve columns">
<div id="slider">
<!-- *** This is the slider that needs to fit smaller browsers ***-->
<div class="row" style="background-color:White;">
<div class="six columns">
<h2>Title</h2>
<div class="summary">
This is the summary is the summary is the summary is the summary is the summary is the summary is the summary.
Learn more
</div>
<div class="some-thumbnails">
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
<img src="http://placehold.it/100x100&text=[thumbnail]" />
</div>
</div>
<div class="six columns">
<img src="http://placehold.it/550x250&text=[img 1]" />
</div>
</div>
<img src="http://placehold.it/1000x400&text=[img 1]" />
</div>
</div>
<hr />
The orbit is controlled by an image generated by some plugin used by the orbit plugin. What I did was to change the plugin to get the height of the left and right part of the highest slide (when changed to phone view) and then set the data-src to "holder.js/[width]x[height]" and call the Holder.run() method.