Snap Wrong in Mobile Device

  • Unknown's avatar
    magagirao · Member ·

    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.

  • Unknown's avatar
    designsimply · Member ·

    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;
	}
}
  • Unknown's avatar
    designsimply · Member ·

    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?

  • Unknown's avatar
    magagirao · Member ·

    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.

  • Unknown's avatar
    designsimply · Member ·

    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.

  • Unknown's avatar
    magagirao · Member ·

    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.

  • Unknown's avatar
    designsimply · Member ·

    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.

  • Unknown's avatar
    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!

  • Unknown's avatar
    thesacredpath · Member ·

    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.

  • Unknown's avatar
    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.

  • Unknown's avatar
    kerrymurrayphotography · Member ·

    Hi again

    Magagirao has just pointed out that the homepage is also looking pretty bad, something I had though had been de-activated by turning off the mobile theme. Here´s another screen grab to show what I mean: http://piteiraphotography.files.wordpress.com/2014/02/snap-theme-home.jpg

  • Unknown's avatar
    kerrymurrayphotography · Member ·

    Hello again

    I’m just checking in to see if anyone has any ideas on how to help with the image distortion and small images when viewing my site on a mobile device? I have attached images in my previous 2 comments to illustrate exactly what the problem is…. I’m hoping that someone will be able to help!

    Thanks so much

  • Unknown's avatar
    thesacredpath · Member ·

    De-activating the mobile theme just deactivates the Mini-Eleven mobile theme, which is a separate theme meant for mobile devices. You are using a responsive width theme, so the main theme adjusts for screen size and device size automatically.

    For the home page, this will get rid of the distortion in the images and correct some of the spacing issues. Set the height in the following rules in your CSS to auto instead of 220px.

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

    See what that does for things on the home page.

  • Unknown's avatar
    thesacredpath · Member ·

    On the main page, the images are smaller because of the block of text you have to the left of the images.

    If you narrow down the demo site slowly, you will see that at about 900px, the blurb on the main page goes full-width 100% with the images in two rows below it. Then at 600px, the images shift to a single row below the blurb.

    I’m going to load some images on my test site and activate Snap and work through this from a fresh start. I think I can make your site look like the demo and have the images spaced correctly without the title and excerpt on the main page. I think we have some stuff fighting us on this.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, @kerrymurrayphotography, take a look at my demo site at: http://intheoutbox.wordpress.com/ .

    The front page works as the demo site does and the excerpt/meta has been removed.

    On the blog page, due to the way the HTML and CSS are done, I would suggest keeping the excerpt on the blog page. If the excerpt text had its own class or ID in the CSS, then it could be hidden and the position of the other elements could easily be controlled. Right now, it cannot. Here is the CSS I used. I would suggest copying all of your existing CSS out and saving it in a plain text file for safe keeping and reference and then add what I have below and see what you think of things, structurally. It this works for you, then you can start adding back in your other CSS (except for the stuff related to what I’ve done below).

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

.tile .post .post-wrapper, .tile .page .post-wrapper {
	height: auto;
}

.tile .post:nth-child(1), .tile .post:nth-child(2), .tile .page:nth-child(1), .tile .page:nth-child(2) {
	height: auto;
}

.tile .post:nth-of-type(2n+1), .tile .page:nth-of-type(2n+1), .tile .post, .tile .page_item {
	border: none;
}

.grid-read-more:before {
background-color: transparent;
content: "";
}
  • Unknown's avatar
    kerrymurrayphotography · Member ·

    Hi sacredpath, thanks for all your help.

    For the home page, this will get rid of the distortion in the images and correct some of the spacing issues. Set the height in the following rules in your CSS to auto instead of 220px.

    This worked well for the homepage, but the images are still little, much like the ones on the blog page.

    If you narrow down the demo site slowly, you will see that at about 900px, the blurb on the main page goes full-width 100% with the images in two rows below it. Then at 600px, the images shift to a single row below the blurb.

    I tried this with my blog, but because the blurb on the left isn’t actually a text block, it’s an image, it doesn’t respond the same way as your demo page. I’m going to play around with the CSS you gave me and see how things go.

    Thanks again for all the time you’ve spent on this.

  • Unknown's avatar
    thesacredpath · Member ·

    This worked well for the homepage, but the images are still little, much like the ones on the blog page.

    Was that with all of your CSS removed entirely? I didn’t experience that with my test site, but then I was using text in the blurb instead of an image.

    I (shamelessly) obsconded with your blurb image and added it to my test site to see what would happen, and it all flows correctly (using only the CSS I gave above). You can see that here and play with it: http://intheoutbox.wordpress.com . I tested it in my desktop browser (at phone and widths) and also directly on my phone and the images are full width of the phone and the blurb shifts over to the right above the images. In landscape on my phone of course, the blurb is not full width, and floated left, but again, the images are full width of the phone display.

    On my iPad, the images are below the left-aligned blurb similar to what you see on a phone in landscape.

  • Unknown's avatar
    kerrymurrayphotography · Member ·

    Hi sacredpath

    Thank you, your test site looks amazing, and that´s exactly what I´d hoped for! I will do as you suggest and remove our CSS and replace it with yours, but as I am a complete CSS novice, and we´ve made so many CSS changes to this site, I´m a bit hesitant as to what I should remove and what needs to stay… which is why magagirao had been helping me with this issue. I will let you know how it goes, and thanks so much for all your time!

  • Unknown's avatar
    thesacredpath · Member ·

    You can add back in your CSS changes a rule at a time and then test as you go and see if something breaks the site. You can then remove that or figure out why it is breaking things, and we are always here to help.

  • Unknown's avatar
    magagirao · Member ·

    Hello all.
    This is code for the homepage+blog area posts: 

    /* area post*/
#blurb {
	width: 35%;
	margin-top:-25px;
	padding-left:10px;
}

.with-sidebar {
	width: 60%;
}

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

}

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

.home .post img {
	height: auto;
}

.tile .post, .tile .page {
margin-top: 1.7em;
padding: 0;
}

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

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

.home .post img {
	height: auto;
}

.tile .post, .tile .page {
margin-top: 1.7em;
padding: 0;
}

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

.blog .tile .post {
    height: 310px;
}

.grid-read-more {
    position: relative;
    right: 0px;
    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%;
}

    On mobile thumbnails still having the same issues.
    My CSS knowledge is unable to see the whole problem. I can’t get this one solve without your help.
    Thanks in advance.

1 2 3
  • The topic ‘Snap Wrong in Mobile Device’ is closed to new replies.