New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Column Block CSS Media Query #12842

Closed
sylvia8308 opened this Issue Dec 13, 2018 · 2 comments

Comments

Projects
None yet
4 participants
@sylvia8308
Copy link

sylvia8308 commented Dec 13, 2018

Describe the bug
A clear and concise description of what the bug is.

Is there any chance you could remove the media query - @media (min-width:600px)? It is preventing me from over riding the margins with the custom css feature and I have to go directly into the files. And of course when the WordPress updates it wipes our my edits. (If you need to target something for less than 600px you could write css specific to that.)

To Reproduce
Steps to reproduce the behavior:

Column block css files located here:

/wp-includes/css/dist/block-library/style.css

  @media (min-width: 600px) {
    .wp-block-column:nth-child(odd) {
      margin-right: 32px; }
    .wp-block-column:nth-child(even) {
      margin-left: 32px; }
    .wp-block-column:not(:first-child) {
      margin-left: 32px; }
    .wp-block-column:not(:last-child) {
      margin-right: 32px; } }
}

style.min.css

@media (min-width:600px){.wp-block-column:nth-child(odd){margin-right:32px}.wp-block-column:nth-child(even){margin-left:32px}.wp-block-column:not(:first-child){margin-left:32px}.wp-block-column:not(:last-child){margin-right:32px}}

Expected behavior
A clear and concise description of what you expected to happen.

I expect to be able to that my custom css code will be able to override the default code so I can set the design how it needs to be set for a specific website design

Desktop (please complete the following information):

Not applicable

Smartphone (please complete the following information):

Not applicable
Additional context

  • Please add the version of Gutenberg you are using in the description.

Installed with WordPress 5.0.1 issue existed with 5.0 as well.

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Dec 25, 2018

It is still possible to override those styles by adding specificity to your custom CSS. There's nothing stopping you from using !important or using the same specificity as the original Gutenberg block.

Thanks.

@dmarman

This comment has been minimized.

Copy link

dmarman commented Dec 29, 2018

Why the first column has to render without margins? I have 3 columns and the first one is doing weird stuff..

screen shot 2018-12-29 at 15 48 03

screen shot 2018-12-29 at 15 48 18

screen shot 2018-12-29 at 15 48 34

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment