How do I add additional media queries?

Design help Custom code
1

  • I have created a grid block with 4 elements in it. (Marked on the photo)

    Screenshot_9
    Screenshot_9809×443 292 KB

  • When the width of the site becomes 1200px I would like to reposition these elements.
    (Marked on the photo)
    Screenshot_10

  • I put it in the custom code:

<style>
@media (max-width: 1200px) {
.aboutme_grid {
  grid-template-columns: minmax(12.5rem, 21.368rem) 1fr;
  grid-template-rows: auto auto auto;
}

.aboutme_image-wrap {
  height: 28.395rem;
}

.Block:local-styles {
  grid-column-end: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-row-start: 2;
  align-self: start;
}

.aboutme_image-ilmira {
  display: none;
}

.aboutme_image-ilmira-ipad {
  display: inline-block;
}

.aboutme_image-decore {
  display: none;
}

.aboutme_image-decore-ipad {
display: inline-block;
}

.Heading:local-styles {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-end: 1;
  grid-row-start: 1;
  justify-self: center;
}

.Paragraph:local-styles {
  grid-column-end: 2;
  grid-column-start: 2;
  grid-row-end: 2;
  grid-row-start: 2;
}

.Block:local-styles {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-end: 3;
  grid-row-start: 3;
  justify-self: center;
}
}
</style>

The problem is that for some reason the columns are not merged.
I mean, these styles:

 grid-column-start: 1;
  grid-column-end: 2;
  • They don’t work

Screenshot_11
Screenshot_11997×720 193 KB

Could you please tell me why styles for grid don’t work when I try to change them in media query?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @pavelIT the spacing in CSS grid column or flex use CSS property gap. Most probably is gap set in WF UI. to change it use in your custom css

.your-grid{
   gap: 0;
}

NOTE: when you are using code you should use 3 backticks followed by language name and close with 3 backticks,

1 Like
3

Thank you for your help, it is valuable) Today I studied what you sent)

I managed to solve the problem with the media query! I was confident that I was correctly specifying values for grid-area, but it turned out that I was making mistakes.

The only thing that is not quite clear is why in Webflow I specify a class, for example:

.aboutme_image-wrap

And in the browser with grid settings, the ID is used:

#w-node-d2965243-227f-8ac1-44f5-f8ce00a13046-858b3e8e {
    grid-area: 3 / 1 / 4 / 3;
    justify-self: center;
}

Screenshot_13
Screenshot_13891×111 5.79 KB

4

hi @pavelIT these are unique identifiers used internally by WF that are generated on compile time. As you can see your class name is presented. When you add to element your custom id it will be add as attribute to your DOM element. If you would like to know what is a difference between element and node you can watch eg. this video or find another source.

These generative identifiers (even as part of class name eg. my-class-name-456TY65bul9) is common practice in many frameworks or libraries. The underscore before this generated number means that is private. etc. etc

Don’t be worry about these as they aren’t important to you (they are important to WF) and you can’t do anything about these.

1 Like
5

Thank you for the answers, I don’t have any more questions for now. I watched the lesson) will continue studying👍

6

The final question has arisen to complete the whole picture.

Am I correct in understanding that if I want to use a media query for an element inside a grid block, in order for the styles to work, I need to use the identifier generated during compilation?

Explanation:
When I use the identifier assigned by WF in the code:

#w-node-_44b13acc-23d1-b91f-ad1a-ee3a05cd43bd-858b3e8e {
    grid-area: 2 / 1 / 3 / 2;
    align-self: auto;

The styles are applied as I specified.
(The photo is for the first example. Styles overwritten)
Screenshot_15

When I use a class of an element with identical styles:

.aboutme_image-wrap {
    grid-area: 2 / 1 / 3 / 2;
    align-self: auto;

when the website is published, the styles do not change, but rather the ones that should work before the media query are used.

(Photo for the second example where I write styles using the element class in the media query
Screenshot_14
)

7

you are over-thinking it. As you can see in your first image (and I mentioned it already) you see class attribute with assigned class name about-image-wrap that take precedence. That’s it. :man_shrugging:

Sometime you need to check DOM and find WF class or attribute be able to do some custom magic but in 95% of the time you do not need it.

good luck