different cropped images on different media

thefabcoach · Member · Sep 2, 2016 at 11:49 am
Copy link

Add topic to favorites
I just upgraded to premium, my question is if I now can choose different “main images” to be shown on mobile and iPad since I think the auto cropping of the images is weird and I’d like to prepare different pics to different devices so it doesn’t look so weird? Thank you.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 3, 2016 at 12:01 am
Copy link
Hi there, we can certainly do that, but on responsive designed themes, featured image sizes are calculated so that they can cover the entire width and height of the area allotted for the image and adjust seamlessly for all screen/window sizes. Currently their are around 100 break points for tablets and phones that have to be considered. If you only deal with iPhones and iPads, people on Android devices may not have a good visual experience. Sometimes you can find breakpoints in between devices that will work more than one that is of similar size, but there is probably always going to be some cropping/resizing that is will have to happen.

What I might suggest, since the original theme uses Media Queries to change a top/bottom padding which controls the height of the image space, is to write Media Queries to adjust the padding so that the entire image, or the most important parts of it, and visible.

Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS, save and then visit your site on phone and tablet and also narrow and widen your browser window. Do this a bit slowly so that the browser has the chance to monitor the width and apply the correct code. Let me know your thoughts. I worked this out on your home page, and other pages may require different values depending on the nature of the images.
```
@media screen and (max-width: 1229px) {
	.hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 150px 0;
	}
}
@media screen and (max-width: 1019px) {
	.hero.with-featured-image, body[class*="front-page"] .hero {
		padding: 120px 0;
	}
}
@media screen and (max-width: 767px) {
	.hero.with-featured-image, body[class*="front-page"] .hero {
		padding:90px 0;
	}
}
```
thefabcoach · Member · Sep 5, 2016 at 10:53 am
Copy link
Fabulous! This was of coruse a way better way to go about the problem!
Thank you so much for the help! :)

Have a rockin’ good week!
Ta-TA!
thesacredpath · Member · Sep 6, 2016 at 7:43 pm
Copy link
Awesome, and you are welcome!
thefabcoach · Member · Sep 7, 2016 at 1:03 pm
Copy link
Another question:
When building the page I somehow managed to do a “new page” (mrs murphys woman power glamout) to the home page, and now this page messes with the URL-adresses to all pages.

If i go to FAB Club, this is the adress I get:
https://thefabcoach.com/mrs-murphys-womanpower-glamout/fab-club/

Everything looks fine in the design and everything, but it looks kind of weird when I’m giving out the adress that the glamour-part is in the link.

What do I need to do to fix this? How i want it to be is this:
https://thefabcoach.com/fab-club/

Thank you in advance.
thesacredpath · Member · Sep 8, 2016 at 7:21 am
Copy link
You have fab club set a a child of the glamout page. That is why the URL looks like that. Open fab club in the page editor and set the “parent” page back to “no parent” and update the page.
thesacredpath · Member · Sep 8, 2016 at 7:23 am
Copy link
If you look at the listing of all your page here, you will see your front page at the top. All those pages below that page that are indented with the dash at the front of the page title (no title in this case) are a child of the front page. You may want to check all those and remove the parent on whichever pages you do not want to be a child of the front page.

No items found.