Hi guys
I’m having a couple alignment problems on my portfolio page here
I cannot seem to get my bottom image to align right and stay to the right of the viewport when the page is scaled by the user.
I’m trying to make it similar to the image that I have on the top left of the page.
Additionally, I had a blank white space on the top of the page, so I added " margin-top: -20px;" to the body but the white space reappears on mobile.
The alignment issues are most notable when this is viewed on mobile.
Thank you for any and all assistance!
3 Likes
The page is coming along great. Maybe you could create a class and do fixed right like this?
I don’t know why it’s having the little white space on the right though…
1 Like
I really like what you have done so far, I think it’d be cool if your hover states for your portfolio thumbnails worked over the image as well as over the tab at the bottom of the picture.
Thanks Zakkary, I appreciate it. I’ll give that a shot.
Thanks! I think that would be cool too 
I’ll add that
blargh, so I tried to add a class to have the image as a background to my div, but as I resize the page, the div shrinks and cuts off the white fade on the left edge of the image, which doesn’t look good. I’m trying to make it similar to the top section of my page where the text overlaps the image, since I will be adding some contact and social media stuff to the right part of the page.
I feel like this is something simple that I’m missing…
So I now have it that it is an img in the div and it has a class of pull-right.
The image is doing what I want it to do but I seem to have padding on the right of the image.
I messed with the padding and found that I can add padding to move it over to the left but I cannot move it to the right.
Is this something I am doing with nesting columns and rows perhaps?
LivShaka, have you discovered the “inspect” tool in your browser? I usually use Firefox and/or Chrome and when something goes wrong when coding, I right-click the part of the page where my element isn’t working properly and I select “inspect.”
If you do this, you’ll find that some of your divs have extra padding on the right side of the bottom image. What’s cool about “inspect” is that it’ll tell you the name or id or your element.
Once you discover what the class or id is, you can use CSS to make that padding zero.
1 Like
Thank you, I’ll give that a shot! I’ve inspected in chrome before but I didn’t think about doing it for a codepen, since I can see the code easily, but that makes sense for zeroing in on specific things.
In this specific case you can’t technically see all the code because you’re using bootstrap, which is where the extra padding is coming from. You can just override it with your own CSS.
Thank you! I added a no-padding class to those containers and now it works just how I want it to.
I’m having just a couple other issues that I can’t seem to solve.
I am still having the problem with a top margin showing up on the page when I resize the window to be small, or when on mobile. I added a negative margin to the body that works for laptop size but it keeps popping back up on mobile or small. I tried adding a media query for a negative margin but that seems to have no effect.
The other problem I am having is with the form. When the browser is small, or on mobile, it looks to be a good size, but on large the input fields are tiny and on medium they are too small. Changing the size of the columns for each field moves them over but does not let them expand.
Additionally, when I resize the browser to be small, the input fields and send button appear to be overlapped by the image. I tried giving the image a negative z-index but it keeps happening.
I know this is a lot of questions, so if you think I should keep trying to find a way to make it work, before reaching out, then feel free to say so!
Thank you for your help!
I found your margin problem. Code Pen’s HTML box is reading your @import like a div, so it’s giving it that margin. If you comment out the import and refresh, you’ll see that the margin in gone. Maybe you can move the import to the CSS box and the font will still work. I haven’t really used Code Pen before, but it might work.
Try giving your buttons a higher z-index, like 3 or 4. Or something like 99999 just to make sure. I like to inspect websites that I like and it sometimes see that lol
I’m not sure why the forms look smaller on on the wide screen. Maybe you can make the forms .col-lg-8 or col-lg-12 so the inputs can look wider on larger screens.
1 Like
Awesome! Thank you @jesusperez! That fixed the margin and I added a z-index to each input group individually. For some reason it wasn’t working when I just added a class for input-group but perhaps that’s something I will learn about in the future.
No matter what, I cannot seem to get the form to change size on large screen. Not changing the column size for the whole section nor for each individual form input. Perhaps its a combination of the two that I’m missing… 
I agree @ZakkaryV ! Page is coming along great just keep building and adding features
1 Like
I think I found what’s causing the form problem. I inspected the form field again and saw that you have a label for every form input field which doesn’t show up on the screen. I’m not sure why, maybe you hid it using css. Anyway, even though it’s not visible, the browser is still treating it like a div and is giving it that col-md-4 size. If you delete those labels and change the class of col-md-4 on your input divs to col-md-8, you’ll get your solution. If you choose to not delete them, Bootstrap has a class that hides divs on certain screen sizes.
I’m telling you, this inspect tool is a godsend lol
1 Like
Thank you all soooo much for your help!
I feel like it is ready so, if you feel so inclined…what do you think of the final product?
My portfolio page
Man I need to take some notes here, because the design is amazing! The color scheme is great and you’ve got some creative takes on the jumbotron and contact sections.
Suggestions
-
Make most of the text a tad bit larger
-
Make a portfolio item take up the whole width of the screen on mobile devices. If you do this, perhaps cut down the portfolio items down to 6 to reduce the amount of scrolling on mobile devices.
-
Add top and bottom padding(probably 2rem) to the #portfolio section so the portfolio items can breath a bit more
-
Add a text-shadow to the send button in the contact section to make the text a little bit easier to read. something like text-shadow: 3px 3px 5px rgba(0,0,0,0.3) might do the job. Of course, adjust as you like.
Keep up the great work!
1 Like
Thank you for the kind words and all the input!
I pretty much took all of your advice and I like it a bunch more.
The text shadow was a great idea and it looks awesome, so I added it in my color bar headings too.
Thanks!
1 Like
