truncated cover photos
-
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)
-
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%; } } -
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 -
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.
-
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 -
- The topic ‘truncated cover photos’ is closed to new replies.