massa | good practices and security of Rails projects | Code Analyzer library

I am trying to build a responsive Website. With quite an effort (and help from the community) I managed to mount a fixed background image. But now I am encountering two issues:

1. With small screens, the content of the elements in front of the image is cut off at the bottom, scrolling is not possible.
2. The footer is overlapping the other elements.

html/ css:

I have a header and main html tags. The header is a navigation bar with position: sticky and top: 0 and the main is a content container with overflow: auto. I would expect that the scroll bar would only be visible on the main element, but it is visible over the header as well.

How do I make only the content of the main tag scrollable?

In a fixed-height container, I have a flexbox (.main) with flex-direction: row and flex-wrap: wrap. At a wide screen size, I'd like its children — an image (.image-column), and a long amount of text (.text-column) — to be columns, in which the image remains static and the text scrolls. So far, so good. When sized down past the columns' min widths, I'd like them to wrap and stack. This all works, but here's the problem: when they wrap and stack, the scrollable text is offset by the min-height of the .image-column above it, such that when you scroll down to the bottom of the text, the scrollbar disappears offscreen rather than remaining within its container. But if you adjust the height to account for this offset, the .text-column is squished in the unwrapped state.

The two conflicting elements seem to be:

• .image-column's min-height: 200px — but without this, the image doesn't show up at all when wrapped
• .text-column's height: 100% — but without this, the text doesn't scroll

I've tried .text-column with height: calc(100% - 200px) — this fixes the offset when stacked, but creates unnecessary whitespace when in columns, and I'd prefer to avoid such specificity anyway

I'd like to figure out a solution with CSS only and no media queries, since this container may be in a multi-column layout with other containers. I'm willing to use flex, grid, float, or any other arcane layout trick.

Has anyone else experienced this issue with flex row wrapping and scrolling?

(You can run the code snippet below to see the layout wrapped, and press Full Page to see the layout in its wide 2-column state.)

I have this simple read more JS function. I want to reuse it, what's the best practice for this? For example, below, I have two read more buttons but I have to copy paste the function and some number to it to use it. Not the cleanest way, what's a better way around this?

It was my understanding, that if an element with position:sticky is nested within a parent element: when the parent leaves the viewport, that "sticky" element will leave with it.

Here I have a "sticky"

within a within . When scrolling through the main element, when the would normally scroll off-screen, it instead behaves as if it's become position:sticky. However, if I change the display of the to be either block or inline-block, it behaves as I thought that it would. What's happening here?
...

First time working with clip path and shape outside, I'm trying to write text inside a triangle with text being clipped. I already tried svg solutions, but text becomes very unreadable which is bad for seo, text readers, etc. (something like "lor em ip sum" )

what I want to achieve:

I was trying this solution, it partially worked, but obviously top area can't be "joined" by the side shapes, but I'm starting to think that achieving what I'm thinking is almost impossible in CSS. Does someone have a suggestion? I also searched for a JavaScript library but couldn't find

I want to insert line breaks in a very long string using REPLACE ALL OCCURENCES OF REGEX. Unfortunately it does not work. It inserts the line break only one time at the very beginning then does nothing with the remaining string.

I have a text file with the following pattern:

I am new to CSS and fiddling with grids, but I am having trouble finding a reasonable way to have a grid with two rows and two columns, where:

Upper left cell: button and TEXT starts Upper right cell: picture Lower left cell: TEXT continues Lower right cell: TEXT continues