Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Search results

  1. tomliv

    Is AI really helpful?

    It can be, but you'd need to know if the code AI produces is flawed or not. I use Github Copilot within VS Code, but obviously there are other tools.
  2. tomliv

    JavaScript JS SCRIPT NOT RUNNING

    Did you try putting the script on the page rather than linking to an external file? Just trying to rule out a path issue.
  3. tomliv

    Want to create a frame for a navbar

    I'd suggest using a UL for your nav items and then you can apply borders to the LI elements. Of course you'll need to style the UL to be without bullets and horizontal. Pad the A elements to create your rectangular click areas. <nav> <div class="box"> <ul>...
  4. tomliv

    How to Position the Radio Buttons?

    Here's what I came up with: /* Form styling */ form { display: flex; flex-direction: column; align-items: center; text-align: left; max-width: 400px; width: 100%; margin: 0 auto; } label...
  5. tomliv

    How to Position the Radio Buttons?

    Add justify-content: flex-start; to the labels
  6. tomliv

    How to Position the Radio Buttons?

    I’d suggest putting the input inside the label but before the label text. Then set the label to display:flex; align-items:center; You might want to add a bit of a margin to the right of the input. If you don’t want the label text wrapping under the input, wrap the text in a span.
  7. tomliv

    Appearance of game on mobile better

    Tough one. Here's a quick sample I whipped up: https://tomliv.com/game-test/ Adjust as needed. You might have better luck with this structure and manipulating the label background rather than the input.
  8. tomliv

    JavaScript How do I get this scroll effect on my navbar

    One thing I noticed is you are sizing fonts with viewport units. This is fine, to a point. Fonts can become very small and very large very quickly. I recommend using this tool: https://royalfig.github.io/fluid-typography-calculator/
  9. tomliv

    JavaScript How do I get this scroll effect on my navbar

    I believe everything you need is in this screenshot: https://cln.sh/pCymVq0kfDjWsWh8tzQ3 Note the structure changes (everything is INSIDE .wrapper) and the Changes panel (far right) for CSS fixes. I was able to get it working just be dragging things in the inspector and tweaking CSS in the...
  10. tomliv

    JavaScript How do I get this scroll effect on my navbar

    <main> is outside of the wrapper. Currently, nav will only stay stuck as long as wrapper is in the viewport. Since all the page content is outside of wrapper, it scrolls away. Also, you don't need shouldn't have a height on the wrapper other than maybe 100vh (so you can force a footer to...
  11. tomliv

    JavaScript How do I get this scroll effect on my navbar

    It would be easier with a link to inspect, but it sounds like the nav is not a child of the wrapper. Note the structure of my sample. The stuck element needs to be a child of the scroll-able wrapper. Scroll-able because of the amount of content. Edit: The stuck element has to be a child of a...
  12. tomliv

    JavaScript How do I get this scroll effect on my navbar

    Here is a quick sample: https://tomliv.com/sticky/ body was given a large height to simulate a lot of content and to allow scrolling.
  13. tomliv

    JavaScript How do I get this scroll effect on my navbar

    I'm not sure why you would define a height at all, unless there is no content on the page. .navbar height should be whatever height it needs for links and padding etc. You would rarely define a height on anything except images.
  14. tomliv

    JavaScript How do I get this scroll effect on my navbar

    The container that you wish to have become stuck to the top of the viewport must be the container that gets position:sticky;. It looks to me like you have position:sticky; on the elements above your navbar. You would need something along these lines: [topper] [navigation...
  15. tomliv

    Video slider

    Haven't used this but may next time I need a slider: https://splidejs.com/
  16. tomliv

    JavaScript How do I get this scroll effect on my navbar

    I don't use bootstrap. And won't, if I can help it, but that's neither here nor there. If the sample code from @simong1993 works, then it appears you can add the necessary CSS for what you need in addition to BS. No?
  17. tomliv

    CSS Sidebar CSS not working on desktop devices

    That seems strange. Did you confirm that your new styles were being loaded? Are they being overridden somehow? Sounds to me that your new styles are being loaded/used on the page.
  18. tomliv

    CSS Sidebar CSS not working on desktop devices

    Did you try copying and adding the styles somewhere without a media query? That would make them apply all the time.
  19. tomliv

    CSS Sidebar CSS not working on desktop devices

    You seem to have made some effect as I am no longer seeing the arrows on this page on mobile or desktop: https://www.ketoforindia.com/mediterranean-diet-meal-plan-food-list-indian/ The styles are listed as 'inline' so perhaps that can help you track it down? I am seeing some kind of utility...
  20. tomliv

    CSS Sidebar CSS not working on desktop devices

    So you don't have access to the code to remove the media query? You can repeat the styles needed outside of any media query and the styles will be applied all the time. It will be duplicate code on mobile but it will work. You can also add another media query: @media only screen and...

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom