Issues with 'max-content'

HTML-CSS
1

Hey all,

Just looking for some help with this. I have a padding on all my sections so that they never touch the edge of the window when resizing. However, the padding doesn’t work on my intro section where I’ve used CSS grid and made one of my grid-template-columns have a value of max-content. How can I fix this? Here’s my code and a screenshot of the issue. Thanks for your help in advance!

Screen Shot 2020-11-26 at 10.42.39 PM
Screen Shot 2020-11-26 at 10.42.39 PM1856×1494 250 KB

^^when I resize the window, it doesn’t shrink to fit and gets cut off :frowning:

@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas: 
            "img title"
            "img subtitle";
        grid-template-columns: min-content max-content;
    }
    
    .intro__img {
        grid-area: img;
        min-width: 300px;
        position: relative;
        z-index: 2;
    }    
    
    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 3em);
    }
}
2

Hey @cbanlawi!
Do you have link to codepen or any other?
It would be helpful

4

Hey, thanks for the prompt response!

https://codepen.io/cbanlawi/pen/oNzNEOy

5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

6

Thanks, will do for next time!