Kevin Powell - Community•11mo ago

Logo Issue

The logo is too small. I want to make it fit in the navbar.

94 Replies

beans•11mo ago

try changing the width or heigh

Lia•11mo ago

it doesnt work. already tried it changes along with the header

b1mind•11mo ago

without code we can only guess

Lia•11mo ago

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: white;
}

li, a {
  text-decoration: none;
  color: black;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 5%;
}

.logo {
  cursor: crosshair;
  width: 100px;
  height: 100px;
}

.nav-links {
  list-style-type: none;
}

.nav-links li {
  display: inline-block;
  padding: 0px 20px
}

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: white;
}

li, a {
  text-decoration: none;
  color: black;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 5%;
}

.logo {
  cursor: crosshair;
  width: 100px;
  height: 100px;
}

.nav-links {
  list-style-type: none;
}

.nav-links li {
  display: inline-block;
  padding: 0px 20px
}

import React from 'react';
import image from '../public/Transaction1.png'

function Navbar (): JSX.Element {
    return (
        <header>
            <img src={image.src} alt='logoPlaceholder' className="logo" />
            <nav>
                <ul className='nav-links'>
                    <li>About</li>
                    <li>Services</li>
                </ul>
            </nav>
        </header>
    )
}

export default Navbar;

import React from 'react';
import image from '../public/Transaction1.png'

function Navbar (): JSX.Element {
    return (
        <header>
            <img src={image.src} alt='logoPlaceholder' className="logo" />
            <nav>
                <ul className='nav-links'>
                    <li>About</li>
                    <li>Services</li>
                </ul>
            </nav>
        </header>
    )
}

export default Navbar;

b1mind•11mo ago

should have guessed... React xD you have strict sizing on the logo 100px its not going to grow/shrink beyond those

Lia•11mo ago

wdym

b1mind•11mo ago

Aslo as a flex child it will always become dense so it will be the size you set it.

Lia•11mo ago

kevin powell bless me 🙏

b1mind•11mo ago

I mean you are setting the size to w/h 100px so its going to be 100px period Maybe step back from learning React and learn the basicis of HTML/CSS first 😄

Lia•11mo ago

yeah but if i get it too big, the header gets too bize aswell

b1mind•11mo ago

This is the meme ...

Lia•11mo ago

look

b1mind•11mo ago

b1mind•11mo ago

same applies

Lia•11mo ago

Lia•11mo ago

LMAO SAME EXACT MEME 💀 see?

b1mind•11mo ago

yea cause people think they can just skip CSS/HTML cause its not important "get right to the React!" when you can't even make a simple staic page xD

Lia•11mo ago

why this meme is so accurate

b1mind•11mo ago

because its common af I see it weekly

Lia•11mo ago

i tought i where the only guy lmao anyways see?

b1mind•11mo ago

no its probably because you were told to "learn React"

Lia•11mo ago

the logo gets bigger when i update width and height of logo

b1mind•11mo ago

so you are just doing that... without realizing React sux and is only one way to make websites (probably the worst way) I would take a CSS coures and take it seriousl.y

Lia•11mo ago

Lia•11mo ago

i want it like this, not the navbar but the size must be readable so idk whats the problem

Jochem•11mo ago

without your live code, it's hard to say. People are way worse code interpreters than browsers, and there's a ton of stuff I'd miss just reading someone's code rather than seeing it rendered in my own browser where I can poke at it with the dev tools you've got a 20px top and bottom padding on your header, which might make the image smaller because it has to fit inside that padding also, your image might have an built-in border of empty space, which would make it appear even smaller try moving the padding onto the nav, that should give your image an extra 20px, otherwise make an example on codepen like described in #How To Ask Good Questions

Lia•11mo ago

hold on does codepen support react

Jochem•11mo ago

just make the example in HTML, react has nothing to do with this issue

Lia•11mo ago

its a css issue

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: white;
}

li, a {
  text-decoration: none;
  color: black;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 5%;
}

.logo {
  cursor: crosshair;
  width: 300px;
  height: 300px;
}

.nav-links {
  list-style-type: none;
}

.nav-links li {
  display: inline-block;
  padding: 0px 20px
}

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: white;
}

li, a {
  text-decoration: none;
  color: black;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 5%;
}

.logo {
  cursor: crosshair;
  width: 300px;
  height: 300px;
}

.nav-links {
  list-style-type: none;
}

.nav-links li {
  display: inline-block;
  padding: 0px 20px
}

Jochem•11mo ago

yes, it is which means it has nothing to do with react

Lia•11mo ago

<header>
            <img src='test' alt='logoPlaceholder' className="logo" />
            <nav>
                <ul className='nav-links'>
                    <li>About</li>
                    <li>Services</li>
                </ul>
            </nav>

<header>
            <img src='test' alt='logoPlaceholder' className="logo" />
            <nav>
                <ul className='nav-links'>
                    <li>About</li>
                    <li>Services</li>
                </ul>
            </nav>

and the end header tag i think i should like make a div to handle all stuff and put the img and header separated

Jochem•11mo ago

I've suggested something that might help (remove the 20px padding on the header), I can't help any more without a live demo 🤷

Lia•11mo ago

wait

Lia•11mo ago

https://codepen.io/Alfredo-Thuglife/pen/PoxxMaq

Alfredo Thuglife

CodePen

PoxxMaq

...

Jochem•11mo ago

you just pasted your react code in there, the classes aren't applying because it's still called className instead of the appropriate class

Lia•11mo ago

done

Jochem•11mo ago

it's still classname instead of class

Lia•11mo ago

my bad lol

Jochem•11mo ago

did you even look at the pen before you link it? like, I'm trying to help but right now you're just wasting my time tbh

Lia•11mo ago

ok done sorry indeed

Jochem•11mo ago

that looks like a pretty big logo to me?

Lia•11mo ago

its a square one default is 500x500

Jochem•11mo ago

the image file you have you mean?

Lia•11mo ago

yep

Jochem•11mo ago

and a lot of it is white space, top and bottom?

Lia•11mo ago

it's just a png i dont want it to be the issue causing all this mess, else I just feel like i'm so stupid

Jochem•11mo ago

is there a lot of blank space at the top and bottom in this PNG? cause the logo in the first screenshot certainly doesn't look like it's square to me. The actual logo part of the image I mean I'd suggest opening paint and removing the white space at the top and the bottom of your image

Lia•11mo ago

Lia•11mo ago

it's just png

Jochem•11mo ago

yeah, perform a crop on that image

Lia•11mo ago

how much do you recommend for it to be the same side as the navbar

Jochem•11mo ago

the PNG should have the very top pixel of the logo on the top row of pixels, and the very bottom of the logo at the very bottom of the image same for left and right if you need padding, handle that in your CSS

Lia•11mo ago

i dont get what ur saying -- can u explain it like ur explaining to a 5yo

Jochem•11mo ago

You have this in a PNG

Jochem•11mo ago

make it so that the PNG is like this:

Jochem•11mo ago

Lia•11mo ago

wait

Jochem•11mo ago

change the PNG

Lia•11mo ago

if thats the issue Im just idiot 💀

Jochem•11mo ago

open paint, select the logo, click "crop", save as, use that image instead

Lia•11mo ago

works with non office users?

Jochem•11mo ago

I don't know what you mean

Lia•11mo ago

its a microsoft thing

Jochem•11mo ago

you're not an idiot, you just clearly have very little experience with HTML and CSS that you absolutely, positively need if you're going to be working with React or any other framework use whatever you want to clip your image

Lia•11mo ago

i can just resize it ig

Jochem•11mo ago

resizing it will shrink the image, you have to crop it are you on windows or some other OS?

Lia•11mo ago

yeah windows

Jochem•11mo ago

open this:

Jochem•11mo ago

then click file, open:

Lia•11mo ago

nah im just using an online stuff which is more precise ill let yk if this worked

Jochem•11mo ago

👍 no idea where you're getting that idea from btw

vince•11mo ago

fwiw I agree with everyone else that you should be learning html css and js before even touching react

Jochem•11mo ago

just please, please, please, learn HTML, CSS, and JavaScript before you go on with your React journey. It will save you so much pain

Lia•11mo ago

ik typescript i don't need that dummy lang

vince•11mo ago

TS compiles into JS

Lia•11mo ago

ATTENTION ALL it kinda worked all i need is proper resizing now look

Lia•11mo ago

Lia•11mo ago

this is the current situation i want the logo the be the SAME size as the nav stuff..

vince•11mo ago

+1 to everyone who said to put it into codepen You'd have your answer already

Jochem•11mo ago

what Vince said, yeah change the height, remove the width

Lia•11mo ago

wait HOLD ON MOMENT OF TRUTH @jochemm UR THE BEST NAH AFTER THIS I AM AN IDIOT I DONT NEED ANY CERTIFICATION TO PROVE THAT 😭 ☠️ ong tsym

vince•11mo ago

You're not an idiot you just don't know any of the prerequisites to using React. Why are you even using React anyway? If you're making a static page I stg lmao

Jochem•11mo ago

@micahhh_06 Out of gratitude for the help you've received, spend the time you'd devote to learning react over the next couple of days, learning the basics of HTML and CSS instead 🙂

Lia•11mo ago

i am just too lazy like look i am 15 and want to develop advanced stuff i just skip the basics on everything i go straight to advanced

Jochem•11mo ago

you can't skip the basics

vince•11mo ago

You're 15 so if you spend the next 5 years hammering the fundamentals you'll be better than 97% of people your age at web dev

Lia•11mo ago

i dont wanna do web dev as a job

Jochem•11mo ago

but you do you. I'm just not going to bother answering super basic questions if you can't be bothered to watch a couple of quick tutorial videos 🤷

Lia•11mo ago

i think i want to be a day trader kevin powell uses intro doesnt it if he uses it then no

vince•11mo ago

Fair enough but you should still learn the fundamentals, like Jochem said you can't skip the basics otherwise you're going to be here asking questions every day Which is fine but they're gonna be questions you could have answered yourself if you spent some time on the fundamentals

Jochem•11mo ago

I don't know what this means

Lia•11mo ago

i promise does kevin powell has intro on his vids or he is straight to the point like i never watched any of his vids before but ik he's a css god

Jochem•11mo ago

then watch some if you find his intros too long, then don't watch any more?

Lia•11mo ago

wait i just realized i can just press a key to skip 5s 💀 ok man im being way too dumb ty for all 🫶

Gaming

Programming

Logo Issue