Kevin Powell - Community•2y ago

Logo Issue

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

94 Replies

beans•2y ago

try changing the width or heigh

LiaOP•2y ago

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

b1mind•2y ago

without code we can only guess

LiaOP•2y 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•2y ago

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

LiaOP•2y ago

wdym

b1mind•2y ago

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

LiaOP•2y ago

kevin powell bless me 🙏

b1mind•2y 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 😄

LiaOP•2y ago

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

b1mind•2y ago

This is the meme ...

LiaOP•2y ago

look

b1mind•2y ago

b1mind•2y ago

same applies

LiaOP•2y ago

LiaOP•2y ago

LMAO SAME EXACT MEME 💀 see?

b1mind•2y 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

LiaOP•2y ago

why this meme is so accurate

b1mind•2y ago

because its common af I see it weekly

LiaOP•2y ago

i tought i where the only guy lmao anyways see?

b1mind•2y ago

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

LiaOP•2y ago

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

b1mind•2y 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

LiaOP•2y ago

LiaOP•2y ago

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

Jochem•2y 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

LiaOP•2y ago

hold on does codepen support react

Jochem•2y ago

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

LiaOP•2y 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•2y ago

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

LiaOP•2y 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•2y 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 🤷

LiaOP•2y ago

wait

LiaOP•2y ago

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

Alfredo Thuglife

CodePen

PoxxMaq

...

Jochem•2y 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

LiaOP•2y ago

done

Jochem•2y ago

it's still classname instead of class

LiaOP•2y ago

my bad lol

Jochem•2y 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

LiaOP•2y ago

ok done sorry indeed

Jochem•2y ago

that looks like a pretty big logo to me?

LiaOP•2y ago

its a square one default is 500x500

Jochem•2y ago

the image file you have you mean?

LiaOP•2y ago

yep

Jochem•2y ago

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

LiaOP•2y 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•2y 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

LiaOP•2y ago

LiaOP•2y ago

it's just png

Jochem•2y ago

yeah, perform a crop on that image

LiaOP•2y ago

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

Jochem•2y 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

LiaOP•2y ago

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

Jochem•2y ago

You have this in a PNG

Jochem•2y ago

make it so that the PNG is like this:

Jochem•2y ago

LiaOP•2y ago

wait

Jochem•2y ago

change the PNG

LiaOP•2y ago

if thats the issue Im just idiot 💀

Jochem•2y ago

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

LiaOP•2y ago

works with non office users?

Jochem•2y ago

I don't know what you mean

LiaOP•2y ago

its a microsoft thing

Jochem•2y 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

LiaOP•2y ago

i can just resize it ig

Jochem•2y ago

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

LiaOP•2y ago

yeah windows

Jochem•2y ago

open this:

Jochem•2y ago

then click file, open:

LiaOP•2y ago

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

Jochem•2y ago

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

vince•2y ago

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

Jochem•2y 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

LiaOP•2y ago

ik typescript i don't need that dummy lang

vince•2y ago

TS compiles into JS

LiaOP•2y ago

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

LiaOP•2y ago

LiaOP•2y ago

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

vince•2y ago

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

Jochem•2y ago

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

LiaOP•2y 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•2y 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•2y 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 🙂

LiaOP•2y 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•2y ago

you can't skip the basics

vince•2y 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

LiaOP•2y ago

i dont wanna do web dev as a job

Jochem•2y 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 🤷

LiaOP•2y ago

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

vince•2y 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•2y ago

I don't know what this means

LiaOP•2y 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•2y ago

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

LiaOP•2y 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

Did you find this page helpful?