SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: CSS problem

  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS problem

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi miet155. Welcome to the forums.

    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. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ralph.m, for your answer..I am new at this yes :-)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Sure, you can just get rid of the "responsive" CSS. Try an experiment: comment out/delete this line in your header:

    Code:
    <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. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. :-) 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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by miet155 View Post
    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.
    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. #7
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Perhaps just comment out that line and test again, and give us a chance to test it here. E.g.

    Code:
    <!-- <link rel="stylesheet" href="/zandbak/templates/sublim_7/css/template.responsive.css" media="all"> -->
    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.

    Code:
    /*
      all CSS code here
    */

  9. #9
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YEs i did delete only that line....
    Now you can test it here
    www.ematie.be/zandbak/happy-things

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Seems to be working fine to me. Page loded instantly, no warnings or anything.

  11. #11
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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. #13
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ;-) Thanks!

  14. #14
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

    You can check it on www.ematie.be/zandbak/happy-things
    I think it is looking good on every device now :-)
    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. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad you sorted it. See you next time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •