Image location change
-
First, find this in your custom CSS and remove the right padding declaration from it.
.display-posts-listing .listing-item .title { text-align: left; line-height: 1.2; padding-right: 35px; }I looked at all the images showing on your main page in the display posts section and they are actually all the same width. The heights vary according to the image being used. There is a left and right margin set on display posts listing div. Find this in your custom CSS and remove the left and right margin if you want the posts/images wider.
ul.display-posts-listing { list-style: none; margin-left: 20px; margin-right: 20px; } -
Or better still, leave that and add this at the very bottom of your custom CSS, which changes the padding to 0 on smaller screens.
@media screen and (max-width: 599px) { ul.display-posts-listing { margin-left: 0; margin-right: 0; } } -
I am a little bit confused. The css you provided will help uniform the pictures to all be the same size and the post titles underneath to all start on the same line, like they look on pc? Just on smaller screens correct?
-
The media query, the second one, removes some margins set on the display posts shortcode that make the images and text look off center and narrower on smaller screens.
-
I added the code to the bottom of the css form but both the images and post titles are still not aligned.
-
The images and post title are aligned at the left in my testing. The FTESWL images, with their white background don’t appear that way although they are.
Can you take a screenshot for me to see?
-
Notice how on the first image the posts aren’t on the same line as they are displayed on the pc
Same with the second image the post images are different sizes and isn’t uniform like on the pc
-
Sorry for not replying sooner. I’m going to have to work at this a bit. There are some things in your custom CSS causing some problems and when I fix them, they break other things, so I have to go back and forth a bit.
Did you by chance keep a copy of all your custom CSS, that was working before, in a plain text file or something?
-
-
What you would be saving now, would be from the site as it is now I don’t think any of the revisions were saved when you installed the plugins and your site configuration changed.
-
So basically it’s too late… as the site currently stands it looks good besides the mobile size issues we are currently talking about.
-
I’ll work on the mobile side of things and post here when I get things straightened out. I’ll likely post the entire CSS for your site which you can then copy/paste into your custom CSS after deleting all the existing.
-
-
-
This is about the best I can do with the state of your CSS right now. Add this at the very bottom of your custom CSS.
@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: 120% !important; paddin-right: 0 !important; } } -
I added the code. There are still post titles that aren’t all uniformed and on the same line. Can that at least be fixed? I also have the logo finally. It’s the last media pic that’s uploaded so we can finally fix the mobile menu and the buttons to be align with the logo.
-
On the titles, you have 35px of right padding on them. Find this rule in your custom CSS and remove the right padding declaration.
.display-posts-listing .listing-item .title { text-align: left; line-height: 1.2; padding-right: 35px; } -
Can you post the URL of the new logo image? It’s a bit difficult for me to get to now that you are on the business plan.
-
I have always been on the business plan. How do I post an image URL? It’s uploaded under my header image. Unless you want something like this.
http://imgur.com/LDw2fMe -
I removed the right padding most of them are aligned but not all of the titles. The post images aren’t all the same size either
- The topic ‘Image location change’ is closed to new replies.
WordPress.com Forums 