Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Feb 2013
    Posts
    5
    Member #
    35252
    Liked
    1 times
    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.

    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.  

  3. #2
    Member
    Join Date
    Nov 2012
    Location
    Huddersfield, West Yorkshire
    Posts
    68
    Member #
    33961
    Liked
    5 times
    Hello,

    When you say overlap?

    I have tested this and it seems fine? It works, how responsive should work.
    Check it out on Responsivator. Am I missing something?

    http://dfcb.github.com/Responsivator...carnevale.com/

    The content will automatically drop down below. This is how your responsive code works.

    Is this what you are wanting to get rid of?

  4. #3
    Junior Member
    Join Date
    Feb 2013
    Posts
    5
    Member #
    35252
    Liked
    1 times
    Sorry about that I actually recently in the past 20 min or so came across the answer while searching so that is why my site now works properly. The original preview link that has the unaltered template would still show the problem but my site has been updated.

    Thank you for the reply
    labforone/Ben likes this.

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by carn723, post: 249112
    Sorry about that I actually recently in the past 20 min or so came across the answer while searching so that is why my site now works properly. The original preview link that has the unaltered template would still show the problem but my site has been updated.

    Thank you for the reply
    Would you like to share the answer with us? It could help someone else down the road.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member
    Join Date
    Feb 2013
    Posts
    5
    Member #
    35252
    Liked
    1 times
    Oh of course where are my manners, I am not that good with forums and am very new to the process. I was so focused on getting solution I forgot to report back. Here is the code someone suggested I add to my css style sheet and it corrected the problem on my site.

    Code:
    @media screen and (max-width: 620px) {
      .left_side_white, .right_side_big {float: none; width: 100%;}
    }
    Hope it helps if anyone else is having the same problem, these @media things are kinda cool.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com