SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: CSS problem

Hybrid View

  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,319
    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,319
    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,319
    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.


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
  •