CSS column issues with template site

HTML & CSS
1

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 [URL=“http://www.anthonycarnevale.com”]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

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:

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

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

Glad that was useful. :slight_smile:

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

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

No worries, although it should be really easy to swap the two columns around in the HTML.

7

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

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

oh I see because of the css tags I assume. Ok might explore that option then just to experiment I didn’t realize.