Image location change
-
I can’t get my whole header image to show. Even though when I crop it I can see the whole thing including the tagline but I can’t see it on my website because it’s cropped off.
-
The most post titles are still off on the mobile/tablet this wasn’t the case before. Everything was uniformed. I didn’t do anything to change that you can see the difference from the “podcast episodes” compared to the “sports article” row. Sports articles are all aligned and uniformed and the podcast episode one isn’t.
-
Once you install plugins, the configuration of your site changes, and essentially you have a self-hosted site where WordPress.com handles all the backend updates and such for you. Once that happens I don’t have direct access to your site.
On the titles, all of them are as they should be given the font size that is being used on smaller screens. Find this rule in your custom CSS and change the font size from 120% to 100% as I have below. Some of the words are simply too long at the 120% font size to fit nicely. At 100% things seem much better.
@media screen and (max-width: 767px) and (min-width: 600px) { .display-posts-listing a.image { max-height: 117px; display: block; } .display-posts-listing a.title { font-size: 100% !important; paddin-right: 0 !important; } }For the images, find this media query in your custom CSS and add a width: 100%; to the second (middle rule) as I have below.
@media screen and (min-width: 600px) { .display-posts-listing { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-between; } .display-posts-listing .listing-item { max-width: 31%; margin-left: 10px; margin-right: 10px; width: 100%; } .display-posts-listing .listing-item a.alignleft { margin-right: 0 !important; margin-left: 0 !important; } }The Money in the Bank and Status or Standard images are of different width to height proportions from the other images. All of your images for these sections will have to be the exact same size, or at the very least the exact same width to height proportions. I can’t stretch those images to make them the same height as the others as it would produce a distortion in the images.
For the header image, add the following to the very bottom of your custom CSS.
.site-header { background-size: auto 100%; background-position: center 15px; background-color: #000; }I went through the procedure to get to your dashboard, and into your Media Library, but I’m not seeing the logo image you want beside the menu on smaller screens.
Go to your Media Library, locate that image, click on that image, and to the right you should see the image file URL.
-
https://fteswl.com/wp-content/uploads/2017/06/cropped-f3.jpg here is the logo.
With the status or standard, money in the bank, FTESWL season 3 episode 19 NBA finals Finale. Is there a code to where everything gets cropped to that size as the rest of them or are the images just too small in general? Because those 3 images seem to be throwing off the alignment with the other posts in their respective sections.
-
I’m just having a hard time understanding how come everything looks aligned and in order on desktop no matter what size the images are as opposed to the mobile/tablet where things are off. Also how did it get unaligned in the first place we had a code in place that had the mobile presentation perfect a few weeks back and all I was waiting for was the logo to add to the sticky menu. Now it’s back to this.
-
Ok, on the logo, that is the one you want on mobile to replace the one that is there now?
On the differences on how things are looking, between before and after the switch was made, I’m at a bit of a loss. I’m not sure if it is a slight difference in the theme itself or whether it’s a difference in the Jetpack code that does the display posts shortcode. I’m thinking the latter. I’m still working on getting the images to be the same, but nothing seems to work. Hang in there, I’ll be working on it again today. I’m going to pull in one of our developers and see if they can see what I can’t.
-
Yes, that is the image I would like to be displayed. I also wanted the menu bar on the left side level with the image. Right now the menu bar is sort of off.
I understand and thank you very much for diligent effort and help.
-
Find this in your custom CSS
@media screen and (max-width: 600px) { .site-header { background: url('https://fteswl.com/wp-content/uploads/2017/05/img_8382.gif') no-repeat scroll center center /contain #000; } }and replace with this.
.site-header { background: url('https://fteswl.com/wp-content/uploads/2017/06/cropped-f3.jpg') no-repeat scroll center center /contain #000; }With the above, the menu toggle on screens 600px and narrower is aligned with the bottom point on the heart. If you wish it aligned with the bottom of the text in the logo, then instead of the above, add this.
@media screen and (max-width: 600px) { .site-header { background: url('https://fteswl.com/wp-content/uploads/2017/06/cropped-f3.jpg') no-repeat scroll center center /contain #000; } .toggle-menu-wrapper { position: relative; top: -15px; margin-top: 0.3375rem; } } -
-
-
Hey scared just following up on the previous issues if you were able to figure out what is going on with the way the posts and images are displayed on the mobile/tablet? Whether it was the jetpack code of the short post code? That’s messing up with the alignment and uniform display I want like we had before.
-
I might have a fix for the images on the home page being different heights. Add the following to your custom CSS:
.display-posts-listing .listing-item a.image { height: 140px; } .display-posts-listing .listing-item a.image img { min-height: 140px; }Give that a shot and let me know how it works.
-
One more thing you’ll need to do, find this section in your custom CSS:
@media screen and (max-width: 767px) { .display-posts-listing .listing-item a.image { max-height: 95px; } }Update it to this:
@media screen and (max-width: 767px) { .display-posts-listing .listing-item a.image { max-height: 95px; } .display-posts-listing .listing-item a.image img { min-height: 95px; } }That should address the image sizing on tablets.
-
-
-
Scared I want the images on the other pages to be uniformed as well. So if you click entertainment reviews you’ll notice each image has its own size. I want for each section the pics to all be one size. About 2-3 times bigger than the front page size.
-
I can force the images to be all the same width on pages like Entertainment Reviews, but the best way from this point forward is to make sure that all your images are the same proportions and conform to the size the theme suggests for featured images in posts and pages, which is 730 wide by 836 high.
We can adjust the image and content width on archive type pages (category, tag and date archive). With the current design, the two sections are set for 50% width, which I think looks better due to vertical alignment as you scroll down the page, but if you wish to play with the proportions, add the following and adjust the 40% and 60% values. Keep the two of them totaling 100%.
@media screen and (min-width: 544px) { .archive .entry-wrapper .entry-image-wrapper { width: 60%; } .archive .entry-wrapper .entry-content-wrapper { with: 40%; } } -
So there isn’t a way to crop all images in a uniform manner like on the front page? We have to mess with the pages dimensions? On the front page you provided me a tool where it didn’t really matter what size the image was it would conform to the box the tool provided
-
We can do this, but as you will see on your Entertainment Reviews page, it crops out some stuff you many not want cropped.
.archive .img-responsive { width: 100%; } .archive .entry-image-wrapper { max-height: 400px; overflow: hidden; }If you have an image that is less than the width provided, we are asking the browser to stretch it, and that means a loss in quality. If you insert an image that is less than the max-height set in the above, it is still going to be smaller than the others that aren’t. This is why I’ve mentioned a few times about preparing your images before uploading them so that they are all a consistent width to height ratio.
-
I do understand what you’re saying. It just sometimes when I try to prep the images I still lose the quality you know? I have seen some sites battle the issue of a crop post image, by when you actually click the image the full image is in the article… do you think that’s a wise way to get around it? I want the highest quality image possible, with very little compromise.
- The topic ‘Image location change’ is closed to new replies.
WordPress.com Forums 
