truncated cover photos

mrcompass · Member · Mar 25, 2015 at 1:35 pm
Copy link

Add topic to favorites
Hello, thank you for taking time. Does anyone want to improve his programming skills? ;D
if i click on one of my cover photos the the next page will open with the cover photo on the header again, but the photo is truncated. It is only in fullscreen mode and in landscape mode on mobile device. I have two screenshots attached. At the red lines the picture will be truncated. Is it possible to move the area of the truncated part, so that my hair is shown on the photo? Or is it not changeable because the photo format is adjusted to change automatically with the size of margin? Thank you very much in advance.
https://mistercompass.files.wordpress.com/2015/03/screenshot-2015-03-24-19-27-15.png

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 25, 2015 at 8:32 pm
Copy link
On mobile landscape, I’m seeing what you are describing. Add the following CSS and then test on mobiles. I’ve limited this change to a narrow range. Let me know if things don’t look right on something. Try it on small tablets also, if you can, or on larger phones.
```
@media screen and (min-width: 400px) and (max-width: 480px) {
	.single .entry-thumbnail img {
		margin-top: 10%;
	}
}
```
mrcompass · Member · Mar 26, 2015 at 2:43 pm
Copy link
hey, thank you so much for your fast support. Unfortunately this has not the desired effect. It will be truncated a bit more. It seems that it has only an effect on mobile landscape mode, not on pc.. I have two screenshots attached. The first is with your custom CSS. The second without. Maybe you know where the problem is?
1. https://mistercompass.files.wordpress.com/2015/03/screenshot_2015-03-25-21-41-05.png
2. https://mistercompass.files.wordpress.com/2015/03/screenshot_2015-03-25-21-41-44-1.png
thesacredpath · Member · Mar 26, 2015 at 8:38 pm
Copy link
Hmm, sorry, I seldom check sites with my browser window set at full width of my 27″ monitor. This is going to be tricky as the images do not all have the same space above your head. Add the following to your custom CSS, at the very bottom and then test on all the posts you have on the main page. 032015 is likely to be a problem.
```
@media screen and (min-width: 1900px) {
	body.single .hentry.has-post-thumbnail .wp-post-image {
		transform: translate(-50%, -40%)
	}
}
```
This may require constructing individual media queries to adjust the spacing for each and every featured image.
mrcompass · Member · Mar 31, 2015 at 12:55 pm
Copy link
your css changes nothing on my 15″ monitor. I think that is the problem as you have already said.. it is tricky, because it is adapted to the margin… Hm..there is another problem which disturbs me more :D. So i try to describe it to you:

I like it that the cubic theme is adapted to the mobile device. But the logo “MR COMPASS” at the top of the site should be centered like in the desktop version (see the first screenshot attached). I have minimized the logo with CSS, so that the menu button on the upper right corner is cubic. That is important and the logo ist in the middle of the line in opposite to the mobile version (see second screenshot), you know what i mean?
CSS:
.site-branding {
float: left;
margin-bottom: 0;
margin-top: 0;
}

.site-logo-link .site-logo {
display: block;
max-height: 70px;
}

1. https://mistercompass.files.wordpress.com/2015/03/screenshot-2015-03-31-14-36-53.png
2. https://mistercompass.files.wordpress.com/2015/03/screenshot-2015-03-31-14-40-46.png
mrcompass · Member · Mar 31, 2015 at 2:37 pm
Copy link
thank you, i have fixed it already with the help of another happiness engineer :) thats the solvent:

@media only screen and (max-width: 480px) {
.site-branding {
padding-top: 15px;
}
}
thesacredpath · Member · Mar 31, 2015 at 6:18 pm
Copy link
Hooray, and you are welcome.

No items found.