Need Help Creating Mobile Version

HTML & CSS
22

Actually what I am typing in is just basically CSS these days. Back in the day SCSS gave you key additional options like nesting and custom variables, but these are now built in to CSS.

Example of nesting and variables

HTML

<section class='hero'>
    <h1 class='section-title'>My title</section>
    <div class='section-container'>
        <img src='somewhere/my-image.jpg' alt='good description'>
        <p>text description here ....</p>
    </div>
</div>

CSS

/* global variables */
:root {
    --text-main: black;
    --text-accent: crimson;
}

section.hero {
    /* local variable overwrites the global */
    --text-main: rgb(20, 20, 20);

    .section-title {
        color: var(--text-accent); /* from global variable */
    }

    .section-container {
        display: flex;
    }

    img {
        border-radius: 0.25rem; /* 4px */
    }

    p {
        color: var(--text-main); /* will take the local version */
    }
}

Using this in SCSS it will be compiled to an un-nested version and add any browser specific prefixes that might be needed. e.g.

...
section.hero {
  /* local variable overwrites the global */
  --text-main: rgb(20, 20, 20);
}
section.hero .section-title {
  color: var(--text-accent);
  /* from global variable */
}
section.hero .section-container {
  display: flex;
}
...

You can view the compiled version in codepen

image
image609×318 20.9 KB

In VSCode I use the live sass compiler extention. Any changes to your SCSS are compiled by default to a public/css folder.

watch-sass
watch-sass1800×610 308 KB

edit: there are maybe times where I will think about using SCSS’s custom variables. For instance frustratingly this won’t work

:root {
    --breakpoint-md: 990px;
    --breakpoint-small: 760px;
}

/* for mobile */
@media (width < var(--breakpoint-small)) {
    ...styles here
}

Using SCSS’s variables will work and be compiled

$breakpoint-md: 990px;
$breakpoint-small: 760px;


/* for mobile */
@media (width < $breakpoint-small) {
    ...styles here
}

BTW I am not the expert, still learning myself :slight_smile:

23

I tend not to differentiate between devices and don’t use standard sets of breakpoints (but that’s just the way I work).

Each of my breakpoints are based on the section/element in the design that needs to change when it looks awkward or doesn’t fit. That breakpoint will not be the same for any other sections most likely. It also means that if I need to tweak the width for one section I don’t end up changing all the others at the same time.

1 Like
24

Yes, I think that’s good advice. Kevin Powell said much the same in the course I have been working on recently.

1 Like
25

Again, thank you for everything and what a learning experience. I am currently using Visual Studio 2022 with Asp.Net Core MVC. I did some research regarding SCSS and it seems like everyone is saying its the future, but it sounds like you are saying basic CSS will do the same. So in addition to the project at hand, I am trying to learn new sikills, but not sure which ones.

26

I am completely lost on how you got the “About” effects. I love it, but between the SCSS and the more complex CSS, I can’t figure it out. Sorry I am so dumb.

27

I cannot figure out how the ‘main-container’ derives its styling. Would you please walk me through this?

28

If you look at Russ’s pen in editor mode then you can go to the middle css panel and click the little arrow on the right and select “view compiled css” and it will show you the SCSS as normal CSS which you can then copy as normal css.

29

Thank you. I did do that, but am really struggling to understand what is going on.

30

No you’re not. Learning CSS can be difficult. ‘CSS The Definitive Guide’ fifth edition I purchased a few months ago is 1000+ pages, which illustrates it’s not a 5 minute exercise.

Hopefully this diagram will help. Note I have changed max-width to 800px, for the purposes of making a diagram.

main-container
main-container1823×1050 380 KB

I am using newer features in that I am using inline and block. Previously if you wanted 2rem padding on top and bottom, you might have typed

padding-top: 2rem;
padding-bottom: 2rem;

a padding-block: 2rem achieves the same.

The same applies to inline

padding-left: 2rem;
padding-right: 2rem;

/* is the same as */
padding-inline: 2rem;

Reference

Oh forgot. margin-inline: auto, centers the main container horizontally inside of it’s parent element.

1 Like
31

Thank you again for all of your efforts. This is extremely helpful and I was unaware of the newer features. I am intrigued by the values in @layer base and how they are used. Is this basically a method of declaring the colors in one place in order to carry them through the entire stylesheet?

32

Here is some proper details

Personally I am using them for grouping and organising my css. I am following Kevin Powell’s naming convention of ‘reset’, ‘base’, ‘layout’, ‘utilities’ and ‘components’. You could call them anything you like.

With regards carrying the colour variables throughout the entire stylesheet, yes, but that is done by declaring them inside :root

Basically rules defined in :root are top of the tree, and those rules will cascade down to child elements :slight_smile:

1 Like