My tribute page to my cat - Okay, but suggestions welcome

Hello. These are my top concerns. I have tried to put everything in a fluid container and made my main image responsive. However, when I go to a small screen or just reduce the size of my window, the picture wraps to the next line.

For the three items at the bottom of the page, the contact info and the donation links, I used a

and <div class’“col-xl-4”> for each of the items. However, they appeared pushed over to the left rather than equally distributed across the page.

Any other thoughts or suggestions are certainly welcome. I appreciate the feedback.

https://codepen.io/dcdunham/pen/BwoWWY

-Dave

Concerning the three items at the bottom of the page, there are two things that bother me, and I’m not sure which one is your problem:

Using the col-xl-4 means that unless the viewport is very wide, all items are wrapped under each other, even if there would be enough space to accommodate them. Maybe use col-lg-4 instead?

Within the wide viewport, all divs have their content aligned left. Maybe you wanted the content centred within the div? Add Bootstrap’s text-center class to each of the three divs.

I don’t know if it’s just me but I don’t see your picture, it doesn’t get downloaded. What I notice most when I resize to a smallish width is the “His Story” section. It gets squished between enormous left and right paddings. You might need to change that. Note that it’s usually easier to design for small screen and then adapt for bigger screens with media queries. It’s possible that Bootstrap does some of that for you, I’m not familiar enough with it to tell.

Are you using the dev tools to see what’s really happening on the page and tinker with the styles? It helps tremendously. And while I debug, I add the following to the CSS so I can see all rectangles:

* {
    outline: 1px solid red;
}

Then I can switch it off at will in Chrome’s dev tools when I want to see the effect of my tinkering.

1 Like

Hi. Thank you for the suggestions. I really appreciate them. I’m still getting the hang of the bootstrap grid system. The “sm” columns used on the cat photo phone app didn’t seem to be working for me, so I probably went too far in the other direction. I’ll try “lg.”

The picture is a direct link to the photon on Imgur. I wasn’t sure as to the best site to use, but it seemed like a lot of people were using that in websites. Any other suggestions are appreciated.

Looks like I’m definitely going to need to work on the “His Story” section. I took my code from Codepen and pasted it into a plain text doc so I could open it in Chrome. When I resize the screen, The outer frame shrinks, but the list area stays the same width.

Lastly, what do you mean by “dev tools”? I’m still learning the lingo.

Thanks!

Still working, but I just wanted to say that the outline CSS is awesome. I had wondered if there was something like that because that’s generally how I edit tables when working with MS Word. Thanks!

Dev tools are developer tools that are available in your browser. They give you access to the internal working of the page. You can see the HTML code for the page, and from there you can select an element and see which CSS styles it has, and you can edit those styles. That allows you to try things quickly and see what works.

Dev tools is also where the console lives. When you debug Javascript code, you’ll likely write debug messages to the console with console.log(). There are many more things you can do with the dev tools, including tracing the performance of your page but you don’t need to worry about this for now.

Chrome always comes with the dev tools. In Safari the tools are present but hidden until you to enable the Develop menu in the Advanced preferences. For Firefox you need to download Firefox Developer Edition. Not sure about other browsers, there’s probably something about it in the forum.

If you’re using Chrome, you can access the developer tools with Cmd + Opt + I on Mac and F12 or Ctrl + Shift + I on Windows. You can also find it in the menu: View > Developer > Developer Tools.

When using CodePen, the HTML can be a bit confusing because there is all the code for CodePen itself. When in the Editor View, you find your code under:

<body ...>
  3 lines here
  <div class="page-wrap twilight">
    <div class="boxes">
      2 lines here
      <div class="output-container">
        <div class="output-sizer">
          <div id="result-div" class="result">
            <iframe .....>
              #document
1 Like

Thank you. I’ve followed your suggestions and also played around a bit, and I think the page is working much better now. Everything re-sizes nicely. The only thing that changes in a small screen is that the main photo flows under the title.

I had been trying to do two rows in the left column and one in the right. Thus all the weird negative margins and padding before. I forgot that bootstrap

elements can be nested in other
elements. I think I’ve learned a lot from this. Reading through the text, it looks like I need to make a few grammar fixes. I really appreciate your help.