CODEWITHSUNDEEP
phphtmlcssinteractive
Datacrawler
Datacrawler

Reputation: 2876

Interactive CSS for all types of screen

I am trying to make my website fully interactive.

First issue: Logo img is not vertically aligned as I want it.

If the screen width is >1200, the margin from the top (nav) is too big. It appears like that :

enter image description here

If the screen width is less it appears as I want it :

enter image description here

I tried to change padding and margin but with no result for all the screen sizes. I am thinking that this could be a good idea :

    .homepage #logo {
        margin-top: -10%;
    }

but I don't think it is a good practice.

Second issue: I have 4 boxes. I made them interactive. I even made the image size interactive thanks to stackoverflow users. So when the screen width is more than 736px it looks like that :

enter image description here

but if it is less, the image is really big :

enter image description here

As a reference here is the link : enter link description here Feel free to ask any CSS. Cheers

Upvotes: 0

Views: 138

Answers (2)

mlegg
mlegg

Reputation: 832

First, edit your css sheet to add the responsive image css I posted about.Then save this text document that I made for 2 to 4 responsive grids

Use the html in the various spots and copy all the css to your stylesheet.

Upvotes: 1

mlegg
mlegg

Reputation: 832

you have some html errors

you have a lot of css errors css validator errors

I'd clean up your code with those links and then save and view your page again. It looks like you have the grid sytem setup in your css.

Upvotes: 1

Related Questions