Menu icon Foundation
why is my site so messed up when you re-size the browser?

So i've been designing the site and it looks great on full screens and on mobile phones but when i re-size the browser to medium width it looks horrid and im not sure what to do about it. I probably jumbled some settings in css that is making it this way but is there anything obvious or an easy fix for this or do I need to go through and re-do a lot of code. This is my first real site and im using foundation so i probably made some begginer errors. Please point those out as well. The site in question is www.omegadesignla.com thanks for any feed back thank you.

html

So i've been designing the site and it looks great on full screens and on mobile phones but when i re-size the browser to medium width it looks horrid and im not sure what to do about it. I probably jumbled some settings in css that is making it this way but is there anything obvious or an easy fix for this or do I need to go through and re-do a lot of code. This is my first real site and im using foundation so i probably made some begginer errors. Please point those out as well. The site in question is www.omegadesignla.com thanks for any feed back thank you.

Ryan Hellerud almost 5 years ago

any help please?

Ryan Hellerud almost 5 years ago

it says someone replied to this post, but i cant see the reply??

Rafi Benkual almost 5 years ago

I didn't look into the CSS but the HTML is okay. I pulled it into a codepen to test http://codepen.io/rafibomb/pen/mJsqj

You should have your customizations in a separate file so you can quickly pick out the issues.

Lyn almost 5 years ago

Hey there Ryan,

Looking really quiclky at the code, there are indeed a few flaws...
As Rafi said, you should have your CSS customization into a separate file to look out for bugs more easily.

A couple of things though :

1) You either have to change the height of the logo (.logo class) to match the height of the topbar (45px) or, if you want to keep the fact that it overflows the topbar, you can just set the ul.title-area to absolute positioning (this should do the trick, but be aware it's not fully tested).

2) About the "Take the tour" button which isn't centered at all, I would change the content of your header tags to this :

<div class="row"> 
    <div class="small-12 columns text-center">
        <a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
    </div>
</div>

Those are really quick fixes to give you a hand.
Feel free to ask for more help here (even though we still don't get mails (Rafi !)) but don't think we're gonna do it all for you :)

Kind regards,

Lyn.

PS : Check your code I'm pretty sure you're missing some closing tags (like the div.row in the header :))

Ryan Hellerud almost 5 years ago

Haha, i'm definately not asking for anyone to do it all for me, as you can see, I've done all the work myself, and just looking for guidance on how I can learn to fix the issues myself. Right now, I've made some changes and I think some of the issues are solved, but more have appeared!! gah!! Now, some funky stuff going on with the 3 step part... Also, What do you mean about the css in a seperate file? I have the css in its own style sheet or do you mean the @media part should be in a seperate file?