Help Needed on Product Landing Page -Still Having Design Issues *Media Query Issue Resolved*

HTML-CSS
1

Hey, everyone. I am having one heck of a go with my Product Landing Page.

Here are my issues:

  1. I really did like the layout of the fCC’s example page. Particularly, I’m trying to replicate their pricing boxes with the border and colored section. Haven’t been able to make that work. I went so far as doing a copy and paste situation after multiple tries on my own. Did not work. Currently, all 3 columns are just basic text going down the page, instead of horizontally across the page. I do not like it at all.

  2. On top of that, I cannot, for the life of me, pass the Media Query test (User Story #14/Layout Test #2). Everything else is passing. I have media queries everywhere in CSS. What is even happening? I know this should take priority and all but the presentation of the page matters too.

  3. I uploaded a leaderboard style logo from Canva to Amazon Photos for the sole purpose of using on the page. Won’t show it. I tried Google Photos. Won’t show it. Initially, I was going to put it in the navigation bar. Wouldn’t even show the broken image icon to acknowledge it. Tried it in the body of the page, won’t show there, either. So I added an Icon and it works on the body as well as the nav bar. But if I put it in the nav bar, I can’t get it to go to the left side of the bar, with the links on the far right.

  4. Plus, my Features section won’t align properly at all. I tried the c+p method from the fCC example here as well. At this point, I’d settle for Centered Icon on one line, Feature Name on the next, and Feature Description on the next.

  5. Although less problematic, the footer section is just… weird. I don’t want the policy/terms links on top of each other in the middle of the page, but off to the left horizontally. The copyright, however, I would like it to be in the middle.

  6. And now, I just feel like I have far too much code in both HTML& CSS compared to the others I’ve seen on here that look so much better than mine. I’ve started from scratch twice already. I even took a break from it for a few days to build the Tech Doc page.

I feel like a hopeless case on this project. Any suggestions to literally any of these issues?

2

For number 2.

add this code

    @media (max-height: 800px) {
    img {
    width: 100px;
    }
  }

below your code:

.navbar a:hover {
    background-color: #e7bd70;
    color: black;
}
3 Likes
3

@clarkngo - Thank you so much! That worked! All the media queries I had, but apparently, this is where it was needed! LOL. At least now I’m passing thanks to you! :slight_smile:

1 Like
4

Glad i could help! :grinning:

I had troubles with those too before. Either the instructions were not specific ori just couldn’t understand it properly. haha LOL. have a great coding day!

1 Like
5

UPDATE: Media Query was solved with the help of @clarkngo.

I also managed to kind of fix the “Features” section into a center alignment by adding justify-content: center; to my .grid in CSS. I did this because if I had display: center; to my .grid I would fail CSS Flex user story test. Ideally, the display: center version would be the way to go for design purposes. However, I have to keep in mind that the tests are necessary and must be passed. Right now, the Icons are far too close to the descriptions, so I’m still playing around with that.

As far as the Footer goes, I managed to get the href’s to go horizontally by removing the ul and li bits. Not perfect but much closer to what I was hoping to do.

Technically, I passed this project… I just really think my design could be better.

What’s next? Focus on fixing these design issues:

  1. Get more space between the Icons and the Features. Not even 10% sure what’s causing such close proximity in the Features section. Seriously, go look at it here on my Product Launch Page. What am I not taking into consideration?
  2. Figure out how to make my actual image(s) to show as opposed to the Diamond icon I used as a substitute.
  3. The Pricing Boxes - I’ve revisited the W3 Schools on flexboxes because I’m working on my personal portfolio as well now. I feel like something in the flexbox is the key to all my troubles with this project section.

Do you have any suggestions for my renewed focus spots for this project?

2 Likes
6

On images, Codepen blocks several free image sources, so for free sources you may have to keep hunting. I have a pro account on code pen as well as my own hosting so I find putting images there work best.

Most of the tests are looking for the Id’s in certain tags. those are simple to add.

Use these projects to get familiar with CSS grid, flexbox and Bootstrap. you’re on the right track there.

A note on media queries, I noticed you have them all in your css…inside other tags such as UL…While it will pass the test, it’s not correct. Media quieries cannot be in other tags/classes/ids in your css, that why the above suggestion works. I’d suggest taking out the stray media queries…it will probably fix your alignment problems too.

1 Like
7

For 1:
You can add .fa-fw class. Like this:
<i class="fas fa-utensils fa-fw" style="font-size: 42px; color:#003429;"></i>

For 2:
I went to the image link on your Product Launch Page : https://www.amazon.com/photos/share/1xycPzUsoDQWCg0lVVKk0SoucBOJkZM9LgfxNzgDCEc

Right-clicked - “Open in a New Tab”.
Right-clicked - “Copy Image Address” which is this:
https://content-na.drive.amazonaws.com/cdproxy/templink/aWXcIhQrdzVG5AmbSYv1q8UYyVpzod5J3IGjeo98m7YeJxFPc?viewBox=1456%2C180

Image should appear, just edit the size of your image =)

For 3:
I tried looking for how to fix it. But i guess the CSS is too much and i’m still not on the level to understand all of it.
I can give you an advice though.

Before, putting content to a webpage. Try starting with a layout.
create headers, tags, then fill them up with just a simple text and contrasting background color.

It’s easy to get lost with CSS.

Like this:

layout

8

@Tirjasdyn - the media queries! :rofl: Might explain why I thought I had far too many lines of code! :sweat_smile:

I think what happened was I took my initial cue from the fCC example pen. Then probably started looking at other people’s Media Query issues for this project and thought, “maybe mine is supposed to be here instead,” and put it there, do a test, realize that wasn’t it, and in my haste to figure it out, forgot to remove it again. Probably didn’t help I was also referencing outside sources like examples from W3Schools (although usually have been a big help for me). ¯\ __(ツ)_/¯

I did try your suggestion on removing those extra media queries, but I’m not seeing a change in alignments - even when on full-page mode. I’ll keep playing around with it.

I did notice that if I removed the media query from the nav under the //navigation bar section of CSS, it made my links go central and vertical. So I left that one in - at least until I understand it better. After realizing the @media is important for the design of the nav bar, I got curious if that would have been my magical media spot for this project. I removed @clarkngo’s original coding suggestion, tested the project, and I failed the user story. Obviously, I put it back in after that. I’m going to set time aside to learn more about media queries since I’m so fuzzy on them currently.

I will say, I have gotten better at reading the User Stories closer. I guess it just felt like, with this particular project’s user story, it didn’t matter quite so much where the media query needed to be. So I was for sure confused when I knew I had all those queries! :laughing: I’ll definitely read more about them. I know they seem so simple but I guess my problem is remembering where they’re relevant. Something I’ll be working on in my to-do list.

And thank you for the head’s up on images using Codepen. I didn’t realize they often block image sources. Maybe after my first software engineering job, I’ll upgrade my account too. :wink:

Now I’m wondering if it will be better to remove my original image and stick with the diamond icon for now.

Thanks for your input, too. Your message might have been quick, but it gave me the confidence to delete those media queries. Also, pretty sure that if you didn’t tell me CodePen blocks images, it would become the bane of my existence! :rofl:

9

Hey again, @clarkngo! I really do appreciate your help! :slight_smile:

Yeah, I think I got lost down a massive rabbit hole when dealing with CSS this time! :rofl: I do like the idea on layouts you suggested. I may do a separate pen for this very purpose. Thanks for the idea!

You piqued my curiosity with the fa-fw suggestion. Had to do a quick Google on it and Font Awesome has examples on this particular class along with many others.

So if I go into CSS and include

.fa-fw { 
  style="font-size: 42px"; 
  color:#003429;
}

could I make my inline HTML simpler?

For example, you suggested this in HTML:

<i class="fas fa-utensils fa-fw" style="font-size: 42px; color:#003429;"></i>

With the CSS code in place, could I do this in HTML instead? Obviously, only adding fa-fw on the icons I want with the CSS info attached.

<i class="fas fa-utensils fa-fw"></i>
10

Actually, @clarkngo - I found out that my way does not, in fact, do the same thing, lol. But, now I know and you don’t have to answer this question! :laughing:

Your tip did space it out a smidge. I’m starting to wonder if I need to redo the grid altogether for the Features section. I mean, since I want definitive space between icon and the desc classes.

11
  1. For number 4, change your ‘grid’ and ‘desc’ class css as follows:
.grid {
  width: 100%;
  display: grid; 
  grid-template-columns: 20% 15% 55%;
  justify-items: start;
  grid-template-rows: 100%;
  grid-column-gap: 5%;
}

.desc {
  text-align: left;
}

In addition add an empty div tag before every div tag with ‘icon’ class to take up the 20% grid column. If you wish to change the arrangement of the grid, just tinker around with the grid column percentages. After adding that you can remove the lengthy css code under the ‘//features’ section.

  1. Additionally delete the whole ‘//hero’ css section, it doesn’t add much to the code.
  2. Most of the media query under the inside the ‘nav’ css selector is useless as it is not attributed to any specific element, the improper code also causes the code below to be neglected due to wrong semantics. One way to avoid this is by taking all your media queries outside of other css selectors and writing them separately at the end.
  3. As for point number 1, it’s hard to give a detailed answer on how to correct it. I have made my Product landing page on a similar line that you intended to, I hope that going through it will help you. My product landing page.