Comments (5)
Correct. <section>
tags are flex boxes. If you change it to an <article>
tag, I think it'll line break appropriately for you, but it'll be left-aligned. This is by design, so developers have a flexbox and non-flexbox option without having to create custom CSS.
To get centered text with line breaks, you have a few options:
- Use a
<header>
tag inside of a<section>
tag - Use an
<article>
tag or a<div>
tag and then create custom CSS to center certain content - Use a
<section>
tag and apply custom CSS to certain elements to make them full-width
from mvp.
Here's a screenshot showing how the H2-H6
(or form
) is colliding with the p
content.
from mvp.
Hi @andybrewer
So I went down the path of Option #1 and adding a header
tag inside of a section
now made anything inside the header
have line breaks.
The trouble is that any other type of HTML tag inside of a section
does not get a line break (only header
tags). E.g. a form
tag inside of a section
has no line break. Any ideas?
Using article
instead of section
gives the desired behavior, I'm just hesitate to use it since semantically - my content is belongs as a section
and not page article
.
(Sorry if this isn't an actual bug and understand if you want to close this ticket)
from mvp.
I just figured out a fix and it's to make the p
tag 100% wide. See the following Pull Request for more detail #64
from mvp.
Implemented: https://github.com/andybrewer/mvp/releases/tag/v1.8
from mvp.
Related Issues (20)
- IE11 HOT 1
- Include some sort of showcase list HOT 2
- Implement semantic role attribute HOT 1
- In Sections, justify-content: center clips content on small screens HOT 7
- Question on <a> usage HOT 2
- Strange alignment of checkbox and radio inputs HOT 2
- hr tag inside section tag is not visible (version 1.7.1) HOT 11
- How to create a full-bleed for a section? HOT 6
- How about fieldset for inline / flex groups? HOT 1
- Non-semantic labels require IDs & yield minimum target size HOT 1
- Why is the dark mode commented-out? HOT 1
- light/dark mode not working on website HOT 4
- Full width header/footer HOT 2
- Misbehaviour with a standard example page HOT 1
- Why is dark/light mode not part of the package? HOT 6
- How to make input width same as the card container HOT 4
- Unused empty space ? HOT 1
- Style <input type="submit"> as a button HOT 4
- bug in the website when opening the website in safari like the close button is floating on the screen. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mvp.