Kevin Powell - Community•2y ago

VSCode Help

I'm trying to work on a project & build a website for my bosses vape shop. I'd ask the general question, but I run into too many problems & I'm still a beginner. I struggle with things that I'm sure most people shouldn't & I just don't know how to put it into words or how to fix my issues. Does someone care to chill with me for a bit & help me work on things? Help me understand how things work & help me with the issues I run into? I get worse & worse everyday & I'm loosing my motivation. I love coding, but this is putting me on edge. I just need help with too much.. I'm sorry.. I don't want to lose my passion for coding though & it's very frustrating.

7 Replies

JWode•2y ago

probably best just to ask the questions as you run into them mate. i know it can be disheartening, but working out the solution is what makes you better. I don't mind you pinging me questions whenever if you don't get responses

kingsilver420OP•2y ago

@NickW I appreciate you bro. Sorry about that though. I'm sure you know that it's painful when code goes wrong lol. I may hit you up soon if that's cool? I have a problem where there's an overflow on the right side of the desktop version, but I'm about to go to work so I'm not too worried about it right now lol.

JWode•2y ago

Yeah no worries. Not sure how new you are exactly, but that pain goes away slightly as you see the same problems over and over (I'm not exactly experienced :D) The best advice I have is be willing to recreate the problem in codepen and draft a question in stackoverflow. I'd say 90% of the time I don't have to post it (thank god), because in the process of drafting the question I've worked out the solution to the problem. But yeah, css can be a bitch for no apparent reason

kingsilver420OP•2y ago

I figured that lol. I did find out the solution to the overflow. It was because I had a negative margin on my headers nav menu, but now I have another issue & I feel like it should be super simple. I created a div for two other divs so I can put them side by side, but the text on the right side isn't moving over to the left. I'm trying flex for the main div, but nothing seems to work. Also, I can put the code in codepen to share & ask about it, but where I'm not paying, I can't upload assets to it to see images. I've been working on all this for maybe a year & a half, but I started out on WP & ended up actually getting into code because WP was pretty limited on what I could do. Give me a few though & I'll try to share my codepen. I'm not sure what stack overflow is.

kingsilver420OP•2y ago

There's a picture though from my phone. I'm just not at my PC. I'm in the kitchen xD

kingsilver420OP•2y ago

codepen.io/KingSilver420/pen/dyjZxmg?editors=1100

JWode•2y ago

 but the text on the right side isn't moving over to the left. I'm trying flex for the main div, but nothing seems to work.

 but the text on the right side isn't moving over to the left. I'm trying flex for the main div, but nothing seems to work.

Line 33 bud: Comment and uncomment that. You've a container div with flexbox set, so store-logo (orange border) and open-hours (red border) are being 'sized' horizontally (I think it's ~50% then adjusted for content size, I'm not really sure). Then within store-logo you have another element, img (blue border) that you've got set to 55% of its parent (the store-logo) element (see image). So your image is being set to 55% of an element that's roughly 50% of the screen. So basically if you want the image itself to take up 55% of the screen, remove line 33 and that will make the image take up 100% of its parent container. Then set that parent container (store-logo) to be 55% (flex-basis:55%)

<div class="section-two">    // Flex, so its children, store-logo and open-hours will be 50% width
  <div class="store-logo">   // If you want the logo to be 55% of the screen, set this to width:55% (or flex-basis:55% is what you should really use)
    <img src="https://www.ispo.com/sites/default/files/styles/teaser_module_one_third/public/b/76/39/76398068-imageData.jpg?h=8f756172&itok=TjFVRx73" />
  </div>
  <div class="open-hours">
    <p class="hours">Store Hours</p>
    <p>MON. 10am - 7pm</p>
    <p>TUES. 10am - 7pm</p>
    <p>WED. 10am - 7pm</p>
    <p>THUR. 10am - 7pm</p>
    <p>FRI. 10am - 7pm</p>
    <p>SAT. 10am - 7pm</p>
    <p>SUN. 12am - 6pm</p>
  </div>
</div>

<div class="section-two">    // Flex, so its children, store-logo and open-hours will be 50% width
  <div class="store-logo">   // If you want the logo to be 55% of the screen, set this to width:55% (or flex-basis:55% is what you should really use)
    <img src="https://www.ispo.com/sites/default/files/styles/teaser_module_one_third/public/b/76/39/76398068-imageData.jpg?h=8f756172&itok=TjFVRx73" />
  </div>
  <div class="open-hours">
    <p class="hours">Store Hours</p>
    <p>MON. 10am - 7pm</p>
    <p>TUES. 10am - 7pm</p>
    <p>WED. 10am - 7pm</p>
    <p>THUR. 10am - 7pm</p>
    <p>FRI. 10am - 7pm</p>
    <p>SAT. 10am - 7pm</p>
    <p>SUN. 12am - 6pm</p>
  </div>
</div>

Hope that helps

Gaming

Programming

VSCode Help