Featured image cropping on mobile device & transparent menu? (Goran)

  • activeaccounts · Member ·

    Can someone please assist with some coding to prevent my featured images from cropping when my website is accessed on a mobile?

    Also, I would like to change my menu drop down so that it is transparent rather than the stock red which is a marked contrast to my featured image.

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there, I’ve checked your site, and although we can do this, it takes a good bit of CSS in order to keep spacing and such proper. In addition, do to the amount of text overlaying the image, when the image gets smaller, the text runs off the top and bottom of the image, which means we have to make the text smaller in order for it to fit, and at phone size, the entire image is covered with the text. Remove the existing custom CSS rule you have and add the following and test in tablets and phones. In my testing this seems to work well. Also, in your computer browser, narrow and widen your browser window kind of slowly and watch how things change. 

    .hero.with-featured-image {
	background-color: #fff;
}
.hero-image .hero {
	-moz-background-size: contain;
	-webkit-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}
body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
	background-position-y: top;
}
@media screen and (min-width: 1230px) {
	body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 23% 0;
	}
}
@media screen and (min-width: 1020px) {
	body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 23% 0;
	}
}
@media screen and (min-width: 768px) {
	body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 23% 0;
	}
}
@media screen and (min-width: 600px) {
	body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 23% 0;
	}
	.hero .page-title {
		font-size: 1.5em;
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (max-width: 599px) {
	body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 23% 0;
	}
	.hero .page-title {
		font-size: 1.5em;
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (max-width: 480px) {
	body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 18% 0;
	}
}

    Let me know if you see any problems. I’ve worked all this up off of your main page, so also check in other pages and such with different titles and featured images. It may be that we have to create different CSS rules for different pages due to differences in them.

  • The topic ‘Featured image cropping on mobile device & transparent menu? (Goran)’ is closed to new replies.