CSS problem

HTML & CSS
1

Hello, i have a problem with my website. It is showing well on computerscreens and Android pad it is going well also…
But when i resize the window from the browser (make it smaller), it get trouble.
Also on Ipad, Ipods and smartphones it goes wrong.
Then the block where the content (banner and aricles) is showing, jumps below the vertical menu.

here is the link www.ematie.be/zandbak/happy-things

I did add the @media codes in the css.

Does anybody know how i can fix this problem?

2

Hi miet155. Welcome to the forums. :slight_smile:

You are just now finding out the big limitation of using display: table for page layout. If you are going to do that on larger screens (instead of float, for example) you need to have the sidebar before the main content in the source order. That means the main content will fall under your sidebar on narrower screens. So my advice would be to ditch display: table and float your content instead. Then you can have the main content before the sidebar in the HTML.

3

Thank you Ralph.m, for your answer…I am new at this yes :slight_smile:
I made this website using Artisteer program for layout and exported it to Joomla and made the pages in Joomla…The problem is now that i don’t want the site to be responsive when it is shown on small devices…i want the articles (= main content) always shown next to the vertical menu. You think this is possible?

4

Sure, you can just get rid of the “responsive” CSS. Try an experiment: comment out/delete this line in your header:

<link rel="stylesheet" href="/zandbak/templates/sublim_7/css/template.responsive.css" media="all">

See if the site works as you want without the responsive style sheet.

5

Hello ralph.m i thought i replied to your last mail a few days ago, but i think for some reason it didn’t apeared on the forum…So here i post again:-)
I did leave out the line in the header and yes…now the content doesn’t jump to the bottom anymore. :slight_smile: BUt now the site is afwuly slow and often i get error loading the page…so i think i 'd better leave this line in the header and instead i will have to adjust the code in “responisive.css”. Can you tell me which code i have to adjust or maybe i can send you the responsive.css file so you can take a look at it. Or you have any other suggestions? Thanks a lot for your help sofar!

6

Yes, the emails are just to let you know there is a reply in the forum. You can’t reply directly by email.

now the site is afwuly slow and often i get error loading the page

That’s not likely to be because of the CSS file, though. More likely is your server is just running slowly.

7

Server is not giving any problem when i don’t delete this line in the header…
I saw in the css file a code "float:left " maybe i should adjust this?

8

Perhaps just comment out that line and test again, and give us a chance to test it here. E.g.


[COLOR="#FF0000"]<!--[/COLOR] <link rel="stylesheet" href="/zandbak/templates/sublim_7/css/template.responsive.css" media="all"> [COLOR="#FF0000"]-->[/COLOR]

Are you sure you are just removing that one line? I don’t believe that could have an effect on the server. It’s just one less thing for the server to do.

Trying to change the styles in that CSS file would be a huge PITA. Another option (at least for testing) would be to leave the file there but just comment out all the code. E.g.


/*
  [I]all CSS code here[/I]
*/
9

YEs i did delete only that line…
Now you can test it here
www.ematie.be/zandbak/happy-things

10

Seems to be working fine to me. Page loded instantly, no warnings or anything. :slight_smile:

11

Realy??? Here still trouble. I tested it on IE9 and chrome and on Ipad and the page is loaded very very slow and not correctly, the logo (round logo with SUBLIMSHOP on it) does not show and the banner with slideshow is now only a grey square. You can browse easily through the pages?

12

Hm, OK, not everything is working now. Try putting that line back in and commenting it out, as I suggested above. It’s pretty weird, but perhaps there were styles in there that all layouts depended on.

13

yea, i wil put the line back into the header and then try to leave out everytime some of the code in de css and then see how it reacts…i will keep you up to date :wink: Thanks!

14

Yes! I found it! I just had to delete this code in the responsive.css file

@media all and (max-width: 999px)
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
}

@media all and (max-width: 480px)
{
#art-resp, #art-resp-m { display: block; }
#art-resp-t { display: none; }
}

and everything is looking good now :slight_smile:

You can check it on www.ematie.be/zandbak/happy-things
I think it is looking good on every device now :slight_smile:
Let me know if you do see any problem.

Thanks for all the help! Next time if i have a problem i will surely come back here!

15

Cool, glad you sorted it. See you next time. :slight_smile: