Layout assistance

May I request assistance in making a grid be the full height of its container/parent.

Hi @jestemtatus

Welcome to FCC. Inasmuch as we would love to help you, it is impossible to tell what exactly is wrong with your CSS. Please create a project on codepen, codesandbox, scrimba, stackblitz e.t.c where people can play with your code and suggest possible solutions.

I’m not sure if you’ve done these challenges already?
If so, can you explain why you have your CSS mixed in with the HTML?

1 Like

Hi, I haven’t seen those yet.

This website allows you to extract the CSS code.

Although my CSS was extracted and put it into a separate file,

Am I able to request assistance/tutoring on here for a price?

Thank you and I apologize for asking.

Hmm… seems like it only partially extracts the CSS code… bits of it stay behind in the <style> tags.

Only other thing I could find is some Javascript plugin you’ll have to compile or something, and I’m sorry but that’s not something I feel like figuring out tonight.

Or you could do it manually. Probably won’t take long, but don’t quote me on that.

You don’t need a tool to extract your CSS, you can just cut out all the stuff between the <style> tags in the HTML, and paste it into the CSS panel.

If you have CSS in both the CSS panel and the HTML, it might lead to unexpected behaviour, which probably leads to different styles on codepen compared to your local Brackets.

Understood.
Is there a simple way to centering text over the 4 thumbnails?

I don’t see any text in your thumbnails. And please don’t take this the wrong way, but your page has a lot of stylings that are problematic. You’ve positioned almost everything absolute and/or with huge margins and with fixed px values, so - even if you manage to make the site look good on a desktop monitor, the layout would be completely messed up in a narrower browser window or a tablet or smartphone.

I managed to add a <span> with some text in one of those boxes and gave it a border, and was able to make it visible by positioning it relative with a huge z-index, but the text didn’t show up for reasons I really don’t understand. I’m sorry but there’s just too much weird styling going on to debug, I don’t even know where to start.

I think you would benefit from going through the fCC challenges in CSS, or some other tutorial of your choice first, before you start building whole websites, but that’s up to you.

I was also able to get assistance from someone and have a project with separate HTML and CSS files.

Wow that looks so much better…
Right now, your square grid has dimensions in px values. To scale it depending on the viewport width, you could use the unit vw instead (100vw = the whole width):

#squaregrid {
  height: 55vw;
  width: 55vw;
}

Note that this has no effect on the font size, so you’d also have to add something like

#squaregrid span {
  font-size:3vw;
}

However, this would cause the elements to never stop growing with the window width. Depending on your layout and what you’ve planned, it’s usually a good idea to add a media query to cut off the growing, where you set the units back to px/em values:

@media (min-width:1200px){
  #squaregrid {
    height: 700px;
    width: 700px;
  }
  #squaregrid span {
    font-size:2.25em;
  }
}

One last comment… although this should do what you intend for your site, it introduces issues regarding accessibility. If the font-size depends on the viewport width, a visually impaired user has no way of increasing the font-size in his browser. This might not be as big an issue because it only affects those four square tiles that don’t contain much text anyway, just wanted to make you aware.

I greatly appreciate it. Credit to @dallasviars for the help.

1 Like

I am on the last steps.