Independent project questions

[flaminghot-cheesepuff]

@anna-pokhilenko

[flaminghot-cheesepuff]

@wendywarren

I can't seem to get my logo to the middle with the mobile size. How can I make the buttons in my

to be wider and the same width? like my wireframe. Thank you!

[wendywarren]

Hi Sophia!

You can set justify-content: center; for your header and that will center the logo. If it needs to change as the screen widens then you would change it in the media query.

[wendywarren]

I don't have your wireframe infront of me but I think I understand what you're asking for. A way you could do it is by setting a width on the ul like I did here to 75%.

Then on your main a you could set display: block. What this does is takes up all available space within its parent container which in this case would be the li which is inheriting the width of 75% from the ul.

Let me know if you have any questions.

Thanks, Wendy

[flaminghot-cheesepuff]

Hi, I can't seem to figure out the svg icon sets thing at the footer. It's on the about-contact.html

The logo also disappeared when I tried to take it from the sprite-sheet. It's also on the about-contact.html

It also made the header and footer so wide.

The design I want to do is like the one on the other html pages but markbot isn't allowing that.

Also, may I ask how I can do the favicon.ico? I'm not sure if we learned that yet but markbot wants it. As well as favicon-196.png. I attached an image.

I'm not sure how to fix the other errors in the screenshot too. I'm not sure what it means by .skip-links since I don't have that in any of my codes

@wendywarren @anna-pokhilenko

[flaminghot-cheesepuff]

On the designs page, how can I make the footer lower?

For my designs page, I added a modal box, but I can't seem to get different modal boxes to pop up for each design. How would I go about this?

Thank you!

The some of the images are just place holders for now

Btw, is it ok that I changed the design a bit for my designs page from my wireframe? I just thought this would make it better

@wendywarren @anna-pokhilenko

[wendywarren]

Hi Sophia!

First off, awesome job on the progress you've made! You're really pushing yourself. Hopefully I'm addressing everything you're asking:

I see your logo and icons on your About page. Remember you won't see them locally on your machine but will when you view it here: https://flaminghot-cheesepuff.github.io/web-design-2-independent-project/designs.html

I also don't see where it's making it wider in the header or footer and it looks the same as on other pages. If you'd like to include screenshots that would help a lot to make sure we're seeing the same thing. Also include what you would like it to look like.

Oh and it's perfectly fine if your design has changed. So long as it's not a complete redesign, you should be good!

Here is what you need to know for skip links: https://learn-the-web.algonquindesign.ca/topics/accessibility-for-design/#skip-links

I'll be sending out a short video or explanation over slack over the next couple of days to guide everyone through favicons.

As for your footer now displaying at the bottom - it's because you've set a height for your <main> container to 1000px. Once you remove that then it will display properly.

Each modal should probably have a unique id. If you take a look at your html, you're assigning each one to be #open-model. I bet if you make them unique pairings it will fix your issue.

      <a href="#open-modal">
        <img src="images/designs/poster-b-w.png" alt="">
        <h2 class="post-title">Theatre Poster</h2>
      </a>
      <div id="open-modal" class="modal-window">
        <div>
          <a href="#modal-close" title="Close" class="modal-close">close &times;</a>
          <h2>Theatre Poster</h2>
          <div>
            <img src="images/designs/poster-big.png" alt="">
            <p>Assignment for my Graphic Design class in the second semester of my first year.</p>
          </div>
        </div>
      </div>

      <a href="#open-modal">
        <img src="images/designs/packaging-b-w.png" alt="">
        <h2 class="pack-title">Packaging Design</h2>
      </a>
      <div id="open-modal" class="modal-window">
        <div>
          <a href="#modal-close" title="Close" class="modal-close">close &times;</a>
          <h2>Packaging Design</h2>
          <div>
            <img src="images/designs/packaging-big.png" alt="">
            <p>Assignment for my Graphic Design class in the first semester of my second year.</p>
          </div>
        </div>
      </div>

Let me know how things go.

Wendy

[flaminghot-cheesepuff]

For the designs page, I used the code from our fancy hover boxes assignment. I can't seem to figure out how to get the h2 to look like that even though I'm using the exact same code.

I have fixed the header and footer so they are good to go.

I followed this tutorial for the skip links but it doesn't seem to be showing up for me. Can you see what I'm doing wrong?https://www.youtube.com/watch?v=UnEItq289lU

for the image I attached, I'm not sure what to do with it.

May I also ask if the deadline is this friday?

@wendywarren @anna-pokhilenko

[flaminghot-cheesepuff]

Hi, this is the accessibility issue I was talking about. It's on all of my pages.

Please also update me on the checkbox problem in markbot.

It's alright if we can't figure out any fix for the hover. I could just remove the h2 there altogether since I already have an h2 in the modal box.

@wendywarren

[wendywarren]

Hi Sophia,

My afternoon got a bit busy at work but I can look into the hover issue tonight or tomorrow.

As for the checkbox and label issue... I think it's to do with the responsive nav. There are other students experiencing the same thing. I will look for a solution. :)

Thanks, Wendy

[wendywarren]

Hi @flaminghot-cheesepuff,

I figured out your issue. The <a> that is surrounding your image isn't actually covering the entire thing. If you hover over <a> with the inspector tool you will see that it doesn't highlight the image even though you can hover.

If you apply disply: block; to the <a> you are now able to see it is covering the entire image and now the positioning of absolute and setting it the bottom of .hover-box will work.

Also you can remove the margin-bottom: 2em; from the img and apply it to .hover-box for space between images.

Hopefully that works for you! :)

Let me know if you have any other questions.

Wendy

[flaminghot-cheesepuff]

Thank you so much!!! I have been trying to figure out a solution for the nav issue as well with my friend, but we can't find any. Please update on slack on how we can fix or work around it please.

Thank you @wendywarren

[wendywarren]

Hi @flaminghot-cheesepuff,

I figured out why Markbot is complaining. Long story short, every input field must have a label but when we adjust our css at the first media query we set only the .nav-toggle-label to display: none; and leave the checkbox way off screen. We can also set the checkbox input to display: none; since we no longer need it in larger views.

.nav-toggle-label,
.nav-toggle {
  display: none;
} 

Let me know if that works.

Thanks, Wendy

[flaminghot-cheesepuff]

It worked! Thank you so much! I'll update you if I can submit when I add my final images in. Thank you!!!

[flaminghot-cheesepuff]

is there anything I have to remove or should I just add that code? @wendywarren ?

[wendywarren]

Hi @flaminghot-cheesepuff,

I apologize...I didn't notice that last message from you until now. I see you've submitted via Markbot but can you please submit a request for grade. Hopefully I haven't missed it in my list of issues.

https://learn-the-web.algonquindesign.ca/courses/web-design-2/week-14/#request-for-grade

Thanks, Wendy

[flaminghot-cheesepuff]

Hi, I have already submitted a request for grade but I forgot to tag you in it. Let me do that right now