SoulSkrix Comments - Answer Overflow

Topics

SoulSkrix

KPCKevin Powell - Community

•Created by rctneil on 8/14/2024 in #front-end

Modern CSS without tools

Hi! The pure CSS approach I use when doing things is to use CSS modules. So the answer is basically yes, you can do both - I like modules for being able to apply individual classes from CSS directly. But it also works with clumping them up into one file, or however you wish to compose your site :) You can try the following: index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <p class="blue">This should be blue</p>
    <p class="red">This should be red</p>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <p class="blue">This should be blue</p>
    <p class="red">This should be red</p>
  </body>
</html>

first.module.css

.blue {
  color: blue;
}

.blue {
  color: blue;
}

second.module.css

.red {
  color: red;
}

.red {
  color: red;
}

styles.css

@import url("first.module.css");
@import url("second.module.css");

@import url("first.module.css");
@import url("second.module.css");

197 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

There is a lot more to do but I didn’t bother going further since I didn’t get it right this far in.

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

Minus the badges and nav which will be mobile replacements

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

No description

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

I guess I want similar to what you see in the screenshot

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

About to hop in the car and go to work, but I’ll check later what you’ve said and have a look at remaking the site after work mobile first.

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

What I was hoping to achieve was to make the text scale down like it did on the homepage with the responsive mode squashing down. So some titles could stay as one liners. Probably not a good idea though.

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

Aye that’s what I was afraid of hearing, thanks though. I only have a desktop design so I’ll make something up for mobile then and try again.

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

I guess I am trying to ask for general advice on making things scale down to mobile nicely and fit

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

Yeah it was a very raw WIP (only a few hours), the only component I started doing properly was the MeAndPoco component.

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

Not familiar with mobile responsiveness at all.

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

But not with the other page

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

No description

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

I know 😅 I just don’t understand how it pushes off-screen to the left. Normally content overflows to the right. When I take the main URL in my web browser in responsive mode I can make it appear as such.

30 replies

KPCKevin Powell - Community

•Created by SoulSkrix on 4/6/2024 in #front-end

Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

Thanks for looking, I also thought the same so I isolated a page without the side badge or navbar placeholders and still get weird issues with my portrait (MeAndPoco) component. https://joseph-d-bradshaw.github.io/personal-site/sections/home Maybe I need to consider trying again with a mobile first approach, as it was an after thought..

30 replies

KPCKevin Powell - Community

•Created by Moni on 4/6/2024 in #front-end

Button to close the website

Hi Moni, you can't do that in JavaScript unless you opened the same window with JavaScript. It is a browser security precaution.

3 replies