Snap Wrong in Mobile Device

  • Author
    Posts
  • #1543237

    magagirao
    Member

    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.

    #1543472

    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.

    #1543482

    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.

    #1543493

    magagirao
    Member

    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.

    #1543497

    magagirao
    Member

    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.

    #1543524

    magagirao
    Member

    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.

    #1543525

    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.

    #1543526

    magagirao
    Member

    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.

    #1543527

    magagirao
    Member

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

    #1543528

    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;
    }
    #1543529

    magagirao
    Member

    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.

    #1543555

    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;
    	}
    }
    #1543557

    magagirao
    Member

    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.

    #1543558

    magagirao
    Member

    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.

    #1543559

    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;
    }
    #1543560

    I take that last recommendation back. It doesn’t scale well. Thinking…

    #1543561

    Try this:

    Find this in your custom CSS:

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

    And replace it with this:

    .tile .post {
    	max-height: 250px;
    }
    #1543562

    magagirao
    Member

    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.

    #1543563

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

    #1543564

    magagirao
    Member

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

The topic ‘Snap Wrong in Mobile Device’ is closed to new replies.