SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS column issues with template site

    I need some help as a beginner understanding columns in css. I am using a template from dreamteplate and I am using the contact.html page as my home page. Here is a link to preview the unaltered template. The problem is when the page is viewed on a phone or the desktop browser window is scaled down horizontally to simulate small device screen the two columns overlap. Same can be seen on my live site here.

    I need assistance knowing what I am looking for to fix and adjust this code. I would either like to make it stop the scaling down at the point right before overlap so you would have to scroll horizontally or even better for phones make the two columns move on top of each other into single column at point of overlap.

    Please let me know if there is any additional info you need as again I am very lost as to where to start looking since it is a template and I don't have much experience.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It's not really viable to preserve those columns on small screens, so this is where you are better off using @media queries. They are pretty cool, actually. Try adding this to your style sheet and see what happens:

    Code:
    @media screen and (max-width: 620px) {
      .left_side_white, .right_side_big {float: none; width: 100%;}
    }

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh wow thank you so much for this, it worked like a champ. I due have 2 more questions. Is there a specific place I need to put this since my css file is quite long and there is another respon css file that has a lot of info relating to screen size so I am not sure if is belongs in there instead? It seems to work no matter what css file I put it in and I attached both if it helps css sheets.zip. Last question is not as important as what you have already greatly solved but is there a way to make it so when it combines them into one column the right columns contents end up on top instead of below the left columns contents?

    Really thanks again for solving that I do appreciate it.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Glad that was useful.

    Quote Originally Posted by carn723 View Post
    Is there a specific place I need to put this
    No, anywhere is fine. Wherever seems best to you.

    is there a way to make it so when it combines them into one column the right columns contents end up on top instead of below the left columns contents?
    I suspected you might ask that. The only really viable way at this stage is to reverse the order of the code in the HTML. There may one day be a way to do this just with CSS, but that's a long way off (such as the grid module that is currently on the drawing board).

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for all the help and I really cant complain since the text in left column is so little I don't think the right column text gets lost being on the bottom. One of these days I will get more time to go through and clean up the template since I know the code is not clean at all. Lots of learning to go but this has at least made my site presentable on mobile devices so I thank you.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    No worries, although it should be really easy to swap the two columns around in the HTML.

  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I kinda like the layout with the contact info on the left but pretty easy if I changed my mind.

    Next I will start working on fixing the prettyphoto script that populates the images and video holder when you click on them. That appears to not take use of the full screen space on mobile devices but this was the biggest hurdle and I was worried it would stop people from using my site on mobile device so I feel a lot better.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by carn723 View Post
    Yeah I kinda like the layout with the contact info on the left but pretty easy if I changed my mind.
    Changing the order in the HTML won't affect the layout ... the contact info will still be floated left and the other column floated right.

  9. #9
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh I see because of the css tags I assume. Ok might explore that option then just to experiment I didn't realize.


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
  •