SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling on my thumbnail not working properly on mobile screens

    Basically this is what the thumbnail looks like when viewed in a desktop. The image is floated left.

    http://i255.photobucket.com/albums/h...ps4ee3ead7.jpg

    But when viewed in a mobile device. The styling does not seem to work properly.

    http://s255.photobucket.com/user/tes...tml?sort=3&o=1

    How can i fix this problem? The width of container is set to {width:100%, height:100%} then img{width:100%}

    This is my HTML/Markup

    Code:
    <div id="article-container" class="alpha omega eleven columns articles">
             <div class="thumbnail">
                 <img src="images/thumbnail-articles-1.jpg" alt="thumbnail" />
             </div>
             <h2><a href="#" title="Place your title">Place your title here</a></h2>
             <ul>
                 <li id="meta-author"><span>By author /</span></li>
                 <li id="meta-comments"><span>6 Comments /</span></li>
                 <li id="meta-date"><span>May 12, 2013 /</span></li>
                 <li id="meta-views"><span>320 Views </span></li>
    
             </ul>
             <p>Lorem ipsum dolor sit a met, con sect et ur adipiscing elit. Sed rutrum mi et blandit pellentesque. Duis vulputate placerat nisi nec varius. Phasellus non nisi dui!.</p>
             <a class="read-more" href="#" title="Read More">Read More</a>
         </div>
    This is my CSS

    Code:
    /**************************/
    /*   NAVIGATION           */
    /**************************/
    
    
    .navigation-right{text-align:right}
    .navigation-right li{margin-right:40px}
    .navigation-left li{margin-left:40px}
    .navigation li{display:inline; line-height:130px}
    .navigation a{text-decoration:none; color:#4d4d4d; font-size:25px}
    .navigation a:hover{color:#7e2d2d}
    
    #logo h1 a{margin-top:20px; margin-bottom:20px; background:url(images/logo.png) no-repeat; display:inline-block; width:173px; height:105px; text-indent:-99999px}
    I will really be thankful to those who can provide me a solution for my problem. I'm not sure if i need to change my markup and just some simple styling.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    How does that CSS relate to the HTML markup?

    Could you please provide a link to the site, or post a stand-alone page that demonstrates the problem.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    @clestcruz
    Yes, we need either a link or a proper code example. Have a look at this post (and the rest of the thread) for tips on how to post a useful code example: http://www.sitepoint.com/forums/show...=1#post5406274

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the link for the website

    http://clestportfolio.zz.mu/root(Client%20Blog)/


    Code:
    	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    	@media only screen and (max-width: 479px) {
    
    	.thumbnail{width:100%; height:100%}
    	.thumbnail img{width:100%}
    	}

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You can't put the border on the image if it's set to width: 100%, as border is added to width. Remove that border from the image, and instead add these styles to the .thumbnail div:

    Code:
    @media only screen and (max-width: 479px) {
      .thumbnail {
      float: none;
      width: auto;
      margin: 0;
      padding: 5px;
      }
    }

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just realized i posted the wrong CSS lol, facepalm.

    Code:
    /**************************************/
    /*   MAIN CONTENT -> ARTICLES         */
    /**************************************/
    
    #article-container{margin-bottom:25px; border-bottom:5px solid #7e2d2d; padding-bottom:20px}
    .thumbnail{float:right; width:220px; height:182px; margin-left:20px; background-color:#4d4d4d} 
    .thumbnail img{margin:5px} 
    .articles h2{font-size:25px}
    .articles  li {color:#878080; font-size:10px; display:inline}
    .articles h2, .articles ul, .articles p{margin-bottom:10px;}
    .articles p{height:100px}
    .articles li span{display:inline; padding-left:15px; background:url(images/meta-icons.png) no-repeat; width:11px; height:11px; padding-left:15px}
    .articles h2 a{text-decoration:none; color:#4d4d4d}
    .articles h2 a:hover{color:#7e2d2d}
    
    #meta-author span{background-position:0px 0px}
    #meta-comments span{background-position:0px -11px}
    #meta-date span{background-position:0px -22px}
    #meta-views span{background-position:0px -33px}
    
    
    
    a.read-more{background-color:#4d4d4d; text-decoration:none; padding:5px; color:white; font:normal normal normal 15px 'droid_sansregular', sans-serif; text-transform:uppercase}
    a:hover.read-more{background-color:#7e2d2d;}

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Did you see that I posted a solution for you?

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes i have, i just posted the correct CSS regarding my problem. I was still sleepy when i posted my problem

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can't put the border on the image if it's set to width: 100%, as border is added to width. Remove that border from the image, and instead add these styles to the .thumbnail div:

    Code:
    @media only screen and (max-width: 479px) {
      .thumbnail {
      float: none;
      width: auto;
      margin: 0;
      padding: 5px;
      }
    }
    There are no border in my image. Basically the image is placed inside a container. For example it looks like this

    <div class="image_container"><div class="place_image">Place image here</div></div>

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    There are no border in my image.
    Yes, sorry, I meant margin. I've provided you with a solution. Have you tried it? In your media query styles for small screens, set the margin to 0 on the image, and add these styles to the thumbnail container:

    Code:
    float: none;
    width: auto;
    margin: 0;
    padding: 5px;

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, sorry, I meant margin. I've provided you with a solution. Have you tried it? In your media query styles for small screens, set the margin to 0 on the image, and add these styles to the thumbnail container:

    Code:
    float: none;
    width: auto;
    margin: 0;
    padding: 5px;
    I tried your solution but it seems that it now has a big margin in right

    http://clestportfolio.zz.mu/root%28Client%20Blog%29/

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, add this to those styles:

    Code:
    float: none;
    width: auto;
    margin: 0;
    padding: 5px;
    height: auto;
    and then add this inside the media rule:

    Code:
    .thumbnail img {
      margin: 0;
      width: 100%;
    }

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, add this to those styles:

    Code:
    float: none;
    width: auto;
    margin: 0;
    padding: 5px;
    height: auto;
    and then add this inside the media rule:

    Code:
    .thumbnail img {
      margin: 0;
      width: 100%;
    }
    Thanks for the fix. Now the containers are perfectly aligned

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad that helped.

  15. #15
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still curious why thumbnail img{margin:5px} won't work in media queries

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by clestcruz View Post
    Still curious why thumbnail img{margin:5px} won't work in media queries
    You had the image set to width: 100%. Adding 5px margin on each side means that the image is 100% width + 10px, which makes it too big for the container. That's why it's better to create that pretend border on the container itself (using padding).

  17. #17
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You had the image set to width: 100%. Adding 5px margin on each side means that the image is 100% width + 10px, which makes it too big for the container. That's why it's better to create that pretend border on the container itself (using padding).
    I see thanks for the insight

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. Yes, it's crucial to understand that padding and margin get added to the overall width of an element. (There are new changes to CSS that make this optional, but essentially—at least for now—the old rules are still pretty important.)

  19. #19
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    border. Don't forget border


Tags for this Thread

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
  •