Skip to content
OverviewSolutions
4
Comments
4
Ngoc Anh Vu-Martell
@anh-vumartell

All comments

  • Elena Martinez•80
    @nenamartinezSubmitted about 3 years ago

    I struggled with two things here, mainly the buttons. Help with these things would be greatly appreciated.

    How do I get the button hover to work properly so that the text becomes white upon hovering the button? Right now it only becomes white if the link itself is hovered. My CSS for the buttons isn't clean, advice would be much appreciated.

    Also regarding the buttons, at different points in the responsive layout, the buttons are not aligned horizontally. Is there any simple way to ensure they stay aligned? The only solution I could think of was to make a grid and separate the button area from the area above it, but that seemed overly complicated.

    3 column design - Responsive layout with grid/flexbox

    2
    Ngoc Anh Vu-Martell•125
    @anh-vumartellPosted about 3 years ago

    @Elena: I'm sorry. My advice didn't really help you. I was trying to help. I once wrapped an anchor tag around a button element and it seemed to work fine. Thanks to @Alex now I know it's not a good approach.

    1
  • Elena Martinez•80
    @nenamartinezSubmitted about 3 years ago

    I struggled with two things here, mainly the buttons. Help with these things would be greatly appreciated.

    How do I get the button hover to work properly so that the text becomes white upon hovering the button? Right now it only becomes white if the link itself is hovered. My CSS for the buttons isn't clean, advice would be much appreciated.

    Also regarding the buttons, at different points in the responsive layout, the buttons are not aligned horizontally. Is there any simple way to ensure they stay aligned? The only solution I could think of was to make a grid and separate the button area from the area above it, but that seemed overly complicated.

    3 column design - Responsive layout with grid/flexbox

    2
    Ngoc Anh Vu-Martell•125
    @anh-vumartellPosted about 3 years ago

    Hi! I’d use interactive element like <button> for all buttons in this challenge instead of wrapping <a> tag inside a <div class=“btn btn-orange> so you can apply hover effect on the entire button. Cheers,

    Marked as helpful
    1
  • Ngoc Anh Vu-Martell•125
    @anh-vumartellPosted about 3 years ago

    At first look, I think 🤔 your problem lies at how you write css selectors when you’re trying to change border color of input field. Your code: #cta form input input:focus { border: 1px solid #f96262; } #cta form input input:active { border: 1px solid #f96262; }

    It should be:

    #cta form input:focus { border: 1px solid #f96262; } #cta form input:active { border: 1px solid #f96262; }

    Marked as helpful
    0
  • PeaNu•90
    @jubeattSubmitted over 3 years ago

    I've written all my processes in the README, you can find many details from there.

    It may need to take some time to read, but I think it's worth it. (Because it really takes me so much time to write😂)

    If you think there is something that can be improved or any suggestions, please feel free to let me know.😃

    It's a long way to go on the front-end, but I will keep going, and I hope you like this work, thanks!😊

    Build by SCSS, BEM, flex-box, grid-box, vanilla JavaScript and jQuery.

    3
    Ngoc Anh Vu-Martell•125
    @anh-vumartellPosted over 3 years ago

    Hello @julbeatt! Your solution looks awesome and thanks for a great README file. I've learned a lot from your reflection notes.

    I'm a beginner in front-end development so I'm glad to learn from fellow front-end developers. I'd love to know which tool do you use to create the Structural drawing in your README file. Thanks and happy coding!

    Marked as helpful
    0