Need help? Check out our Support site, then


Snap Wrong in Mobile Device

  1. Hello.
    My client's homepage has undergone some changes in its layout. This forum help us on the CSS.
    But unfortunely, the layout is no longer responsive.
    This is our code:

    /* area post*/
    #blurb {
    	width: 35%;
    }
    
    .with-sidebar {
    	width: 65%;
    }
    
    .tile .post img {
    	max-height: 250px;
    }
    
    .home .with-thumb .grid-content-wrapper {
    	display: none;
    }
    
    .home .tile .post .post-wrapper {
    	height: 245px;
    }
    
    .home .tile .post {
    	height: 245px;
    }
    
    .blog .tile .post {
    	height: 343px;
    	padding: 0;
    }
    
    .blog .tile .post .post-wrapper {
    	height: 245px;
    }
    
    .grid-read-more {
    	position: relative;
    	right: 0;
    	top: -30px;
    	text-transform: uppercase;
    	font-size: 11px;
    	color: #666;
    }
    
    .tile .post:nth-of-type(2n+1) .set-post {
    	padding-right: 4%;
    }
    
    .tile .post:nth-of-type(2n) .set-post {
    	padding-left: 3%;
    }

    We really appreciate your help on this matter.
    Thanks!

    The blog I need help with is piteiraphotography.com.

  2. Hi there, can you clarify this is the site you are talking about, and what is not working responsively? I took a look and notice you have the mobile theme activated, but when I looked with my iPhone at the site (without the mobile) it I'm not seeing a loss of responsive design. I do see that the read more links are spaced way down from the images when viewing on my iPhone.

  3. kerrymurrayphotography
    Member

    Hi sacredpath, thanks for getting back to us... I am working with magagirao on this problem, she knows much more about CSS than I do and so she's been helping me set this blog up.

    It's specifically the distance between the links and the images that are causing the problem, I have viewed on several mobile devices and sometimes the text and image are even overlapping. Is there something in the code we've used that's causing this?

    Thanks for your help.

  4. Hi thesacredpath.

    . I do see that the read more links are spaced way down from the images when viewing on my iPhone.

    Yes, that's the biggest problem.

    Thanks for your help.

  5. We've this answer from the Premium Forum.
    Does it help you?
    We're also trying to achieve a solution through this.
    Thanks

    I cannot say exactly what is going wrong here, but it appears that you are negating the media queries with your custom code. The media queries allow you to define code that should run when the screen width is narrower. It seems like you've stamped out the effect of the media queries, hence the mobile is not adjusting as you would hope.

  6. I'm trying some code changes in order to know if I catch the problem/solution.

    When putting this height to 1%

    .home .tile .post .post-wrapper {
    	height: 245px;
    }

    The 'READ MORE' stays to above the image. But still there is a big vertical space between the images. It's like if the code doesn't know that the post description isn't to be visible, althought the code:

    .home .with-thumb .grid-content-wrapper {
    	display: none;
    }

    Is there something in the code we've used that's causing this?

    Thanks for your help.

  7. Try the following. Find it in your existing custom CSS and change the height to "auto". It seems to fix the issue of the spacing between the images and the read more link at all browser window widths but there is still the spacing issue we need to address.

    .home .tile .post .post-wrapper {
        height: auto;
    }

    I'm still working on the large white space issue at smaller browser window widths. We need to set something else to "auto" I think, but I have not yet figured out what. Also, things go wonky with things overlapping vertically at a browser window width of about 600px and then it starts to straighten out as the browser window is narrowed. I might be able to fix that with a padding or margin on an element.

  8. Hi.
    I added the padding here:`/* area post*/
    #blurb {
    width: 35%;
    margin-top:-25px;
    <strong> padding-left:10px;</strong>
    }`

    Also added your code, yes, it works. I try "auto" in every code line, but nothing works. Maybe a new sentence.

    About the 600px, yes, it happens the same as the iphone. When we start reduzing the browser window elements get overlay.
    Thanks for the help.
    We're still trying to figure out a solution.

  9. P.S. Sorry I didn't put the code in the right way.

  10. Things are looking a lot better when the browser window is narrowed, but I have two suggested changes. In the first rule, change the height from 235px to auto and then add the second rule.

    .home .tile .post {
        height: auto;
    }
    
    .tile .post, .tile .page {
    margin-top: 1.7em;
    padding: 0;
    }
  11. Hooray!
    It's OK thesacredpath. And almost perfect : - )
    Did you notice that the 4 image thumbnail (the ones fiancé with no shoes) it's on a different position? Maybe 4 px down?
    Do you've any idea to solve it?

    thesacredpath: thanks for all your patience and attention.

  12. I checked http://piteiraphotography.com/ at browser widths of less than 600px, and I see what you mean about there being extra spacing below the last image. There is some spacing above the footer that you can remove that I think would solve the problem. Also, I think it would look nice if you removed some of the extra space below the header image at the top on small screens.

    Here is some example CSS that will reduce the spacing above the header as well as below the header image but only if the browser window is 600px or smaller:

    @media screen and (max-width: 600px) {
    	#footer {
    		margin-top: 0;
    	}
    	.theme-container {
    		padding-top: 0;
    	}
    }
  13. Hello Designsimply.
    Thanks for the help.
    I've put our code, but we can't see any difference. I also defined the footer margin top, not too much, we like to have some visual space between the main area and the footer area. Still some little extra space between the post. But since last sacredpath help, it's OK.

    Now, as I wrote in 16 December, the problem it's the 4 image thumbnail (the ones fiancé with no shoes). It has its vertical position below the others.

    Thanks for your help.

  14. About the header.
    Yes, I've defined its height to 80px; but in mobile device the logo is half hidden, so I took off the height.

  15. Now, as I wrote in 16 December, the problem it's the 4 image thumbnail (the ones fiancé with no shoes). It has its vertical position below the others.

    It took me a minute to even find this, especially since it's only a couple pixels off—I almost completely missed it!

    If you add this in the CSS panel in a live preview (or by using the browser's web inspector), it illustrates the problem:

    .tile .post img {
    	padding: 8px;
    	border: 1px dashed red;
    }

    Here's a screenshot I took: https://cloudup.com/cIJ5wFWwCsu

    That issue is happening because of how you have stacked those posts using this custom CSS:

    .home .tile .post {
    	height: auto;
    }

    Combined with the fact that they are not all equal in height. The first in that set of 4 is 298 x 283 px and the 2nd one is 298 x 286px. So there is a difference of 3 pixels.

    I also noticed you've set a max-height of 250px on ".tile .post img"

    Instead of doing that, try replacing that CSS block with a hard set image height like this:

    .tile .post img {
    	height: 250px;
    }
  16. I take that last recommendation back. It doesn't scale well. Thinking…

  17. Try this:

    Find this in your custom CSS:

    .tile .post img {
    	max-height: 250px
    }

    And replace it with this:

    .tile .post {
    	max-height: 250px;
    }
  18. Hello again.
    Thanks for your fast help : )
    Oh, if they are not with the same height, that's the problem and solution. I'll tell my client. About, the 'auto', sacredpath help me in that. The idea (I think so, this is a looong post) was to solve the big white space between post in 600px or less.
    : )

    .tile .post img {
    	height: 250px;
    }

    It behaves the same. We've 'max-height:250px;'

    Thanks designsimply.

  19. Sorry, we were both replying at about the same time before, try the latest recommendation I posted that takes "img" out of that selector.

  20. : )
    This is a hard one post. eh eh

    I'm trying that and other changes. We've different behaviors for the post at homepage and from blog.

  21. Well.
    The last code you gave me, changes the Blog Post and the Homepage post area. And they should behave differently.

    But they are OK.

    .home .tile .post .post-wrapper {
    	height: auto;
    }
    
    .home .tile .post {
    	height: 240px;
    }
    
    .home .post img {
    	height: 220px;
    }

    Now.
    I've two little problems.
    1) the thumbnails height. The left column on the blog has the images height smaller (2-3 pixels) than the right column. This is weird, isn't it?

    2) I can't figured out why READ MORE is like that in the blog. Should be the same as Homepage. It was OK.

    Thanks again for your time and help.

  22. 1) Yeah, I think that's weird too. I'm not sure why it's doing that.

    I do think you should try this though:

    .home .tile .post {
    	max-height: 240px;
    }

    And I think you can take this rule out:

    .home .post img {
    	height: 220px
    }

    A different alternative could be to add different heights for different natural breakpoints like this:

    @media screen and (min-width: 600px) {
    	.home .tile .post {
    		max-height: 140px;
    	}
    }
    @media screen and (min-width: 692px) {
    	.home .tile .post {
    		max-height: 180px;
    	}
    }
    @media screen and (min-width: 900px) {
    	.home .tile .post {
    		max-height: 220px;
    	}
    }
  23. 2) I can't figured out why READ MORE is like that in the blog. Should be the same as Homepage. It was OK.

    Sorry, I'm not sure what you mean by this. Which "READ MORE" are you looking at? On the home page? A different link?

  24. Hello. Sorry for the delay.
    About this:

    .home .post img {
    	height: 220px
    }

    I can't take it, because my client doesn't want the text to be visible. Taking off this line all information are on.

    The Read More link is perfectly OK at Homepage (in the 4 thumbnails area), but at the Blog page is to away from the thumbnails image.

    Thanks for the help.

  25. Aha, I didn't make the connection before! Sorry about that. I see now that this is the page you are referring to: http://piteiraphotography.com/blog/

    It helps very much to always include a link.

    Okay, so in your custom CSS, you currently have this as one of the rules:

    .home .with-thumb .grid-content-wrapper {
    	display: none;
    }

    Because you added ".home" to the front of that rule, that means the rule will only apply to the home page.

    If you wanted to make that specific rule also apply to the blog page, you can use ".blog" instead of ".home" in that case:

    .home .with-thumb .grid-content-wrapper,
    .blog .with-thumb .grid-content-wrapper {
    	display: none;
    }

    Or you could take off ".home" if you don't think it's needed. It might not be necessary for that specific rule (I don't see why you need it). If you took it off, the rule would become this instead:

    .with-thumb .grid-content-wrapper {
    	display: none;
    }

    Try experimenting and watch how the home and blog pages get update when you try adding a ".blog" rule or when you try removing ".home" from that rule.

  26. Hey. Sorry for the late delay.
    Yes ".home" is for the homepage, and we had alread ".blog"

    We've ".home" because we want the posts to be different: no title, less space between them. That's the reason.

    This don't solve the 'read' link problem.

  27. The Read More link is perfectly OK at Homepage (in the 4 thumbnails area), but at the Blog page is to away from the thumbnails image.

    I checked your custom CSS again, and I see that you have this:

    .grid-read-more {
    	position: relative;
    	right:0;
    	top:-30px;
    	text-transform:uppercase;
    	font-size:11px;
    	color:#666
    }

    That rule affects both the home page and the blog page right now, because it's a general rule without .home or .blog as the first part of the selector.

    It looks like you want to keep most of those attributes and just adjust the spacing to be a little different on the blog page. To do that, you could add a new rule below the one shown above and apply it just to the blog page so you can adjust the spacing for the read more link there without affecting it on the home page.

    Here is an example you can try out:

    .blog .grid-read-more {
    	top: -40px;
    }

    Adjust the -40px value as needed.

  28. kerrymurrayphotography
    Member

    Hi designsimply, thanks so much for all your help with this issue. Magagirao has been helping me with this because she knows a heck of a lot more about CSS than I do. :)

    I used the code you supplied above and it seems to have fixed the issue of the "read more" position on the mobile theme, but on the regular browser window it pushes the "read more" into the featured image. Which in itself is not so much of a problem, since its small and doesn´t look bad… but it makes me wonder if perhaps the odd positioning of the "read more" on the mobile theme is actually because the featured images arent showing at the correct size, they´re quite a lot smaller than they should be, and this might be why the "read more" is so far away?

    When I compare the featured image size of my blog (piteiraphotography.com) to the Snap theme demo, it´s quite clear that the images on my blog aren´t showíng the correct size. I have dis-abled the mobile theme, too, because it wasn´t´looking good, images were being squashed and distorted and it all looked quite bad. So now it´s just the latest posts showing on the mobile theme.

    I realise that by tweaking the CSS as much as we have it does cause the mobile theme to react unpredictably, but if theres any way we can make the images show at the correct size I would very much appreciate it.

    Thanks for all your help so far!

  29. Hi there, there has been a lot of things going on in this thread, and I've been out of it for a while, so trying to catch up. You can add an @media query to the last bit of code that @designsimply gave to move the read more down below the image. I've set it for 972px minimum width. See what you think. Replace the last bit of code, or modify it to look like this.

    @media screen and (min-width: 972px) {
    .blog .grid-read-more{
    	top:-40px;
    }
    }

    There are still issues, but this is one more step.

  30. kerrymurrayphotography
    Member

    Hi sacredpath

    Thanks so much for following along up until this point, I know this thread has been going on and on, but hopefully we have almost everything fixed now.

    Your code worked perfectly on the "read more" issue, thank you!

    So now the only thing that is still not quite right is the size of the featured images in the mobile theme. I have uploaded a screen grab of my blog (on the left) compared to the Snap demo blog (on the right) to show what I mean.
    http://piteiraphotography.files.wordpress.com/2014/02/snap-theme.jpg

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags