www.webdeveloper.com
Results 1 to 13 of 13

Thread: Issue with container

  1. #1
    Join Date
    Nov 2013
    Location
    Canada
    Posts
    12

    Issue with container

    I'm learning to build websites. Can someone tell me what's wrong with the following code ? When I look at my website from a mobile, the image do not remain within the span3 "container" and therefore the image end up one on the other. Would it have to do with CSS ?

    Thanks for your help. I've been trying to figure it out for hours.



    <div class="span3" >

    <h5>MERCHANDISE</h5>
    <p><br></p>

    <div class="flip-container2" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
    <div class="front">

    <!-- front content -->
    <a href="http://johndoe.com" target="_blank">
    <img class="blogo4" border="0" alt="John Doe" <img src="images/iszmarket.png"/></a>
    </div>
    <div class="back">
    <!-- back content -->
    <a href="http://johndoe.com" target="_blank">
    <img class="blogo4" border="0" alt="John Doe" <img src="images/iszmarket.png"/></a>
    </div>
    </div>
    </div>
    </div>



    <div class="span3" >

    <h5>CONTACT John Doe</h5>
    <p><h6> Email: <a>info@john.com</a> </h6></p>

    <div class="flip-container3" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
    <div class="front">

    <!-- front content -->
    <a href="http://johndoe.com" target="_blank">
    <img class="blogo4" border="0" alt="John Doe" <img src="images/isz145.png"/></a>
    </div>
    <div class="back">
    <!-- back content -->
    <a href="http://johndoe.com" target="_blank">
    <img class="blogo4" border="0" alt="John Doe" <img src="images/isz145.png"/></a>
    </div>
    </div>
    </div>
    </div>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    CSS is probably involved, but to start you need to correct a syntax error in your <img> tags.

    Code like this:
    Code:
    <img class="blogo4" border="0" alt="John Doe" <img src="images/iszmarket.png"/>
    should be:
    Code:
    <img class="blogo4" border="0" alt="John Doe" src="images/iszmarket.png"/>
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2013
    Location
    Canada
    Posts
    12
    Thanks for you help Rick. I've made the correction as you suggested.

    I still have the issue with the images ending up one on top of the other in the mobile version. Any suggestion anybody ?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,133
    It's impossible to say without seeing the entire HTML and CSS for the page. Post the code in a message or post a link to your page.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Oct 2013
    Location
    Utah
    Posts
    13
    This kind of stuff usually happens because of floats and positions, etc.

    Since you haven't given us the page or the css to look at, i'm going to take a wild shot in the dark.

    Try adding this css to your file...

    .span3 {overflow:auto;}

    there's a good chance this will fix your issue.

  6. #6
    Join Date
    Nov 2013
    Location
    Canada
    Posts
    12
    I would like first to thanks Rick and httpster for how quickly to responded to my post. I'm surprised and it makes me realize how nice is this forum. I've been trying different things all day and I can't figure it out.

    here is the website: https://dl.dropboxusercontent.com/u/...2.1/index.html

    Line 2596 till the end is where I have a problem (in mobile version).

    unfortunately the .span3 {overflow:auto;} didn't work out. I would really appreciate if someone could help me.

  7. #7
    Join Date
    Oct 2013
    Location
    Utah
    Posts
    13
    Hmm, interesting.

    So it's happening because the height of the .flip-container2 and .flip-container3 is dropping down to 0. Usually it's a float issue like I mentioned before, but there seems to be some other issue that i'm not seeing.

    But this will fix it and make it work.

    .flip-container, .flip-container2, .flip-container3 { height:104px !important; }

    104px being the height of those flip images so it's as big as it will ever need to be.

  8. #8
    Join Date
    Nov 2013
    Location
    Canada
    Posts
    12
    Sincerely, thanks a lot httpster !!! You are really helping (and educating) me here ! I really appreciate your help !!! I will sure be back on this website next time I have a question !!! Thanks a lot again !!!

  9. #9
    Join Date
    Nov 2013
    Location
    Florida/United States
    Posts
    12
    Can it possible that container should show some effects also as when the forum that is inside container filled and submit it show some different coloring border.

  10. #10
    Join Date
    Nov 2013
    Location
    Canada
    Posts
    12
    Hi KimberlyDeborah ! Are you sure you are referring to the right post ? For what I understand, yes you could (for instance) add .front, .back {background-color:blue;} to see the effect on the container.

  11. #11
    Join Date
    Nov 2013
    Location
    Florida/United States
    Posts
    12
    Thanks galaxyweb i am just not getting this solution i will try this and get back to you!!

  12. #12
    Join Date
    Nov 2013
    Posts
    1
    very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post.

  13. #13
    Join Date
    Nov 2013
    Location
    Florida/United States
    Posts
    12
    Yeh!!! pearlprice22

    Important information and some special tips for doing things are explained here and its great to discuss with all these experts.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles