Image location change
-
I would like to change the location of my image on my static front page from the left to on top of each title post. I can change the size of the images from thumbnail to medium if the images are too small. I would like to have the 3 posts in each section horizontal as opposed to vertical like it is now when the images are on top of each post title. I would like the blue box that the post titles are in to all be the same size so it doesn’t change no matter how long or short the text is. The main goal is to make the post title and theimage above the post title uniform.
The blog I need help with is: (visible only to logged in users)
-
Hi, put this at the bottom of your custom CSS, and I would suggest changing the image sizes in the shortcode to “large”. Even at Medium, the images will not be the full width of the content area and will likely look abit funny. Try large.
.display-posts-listing .listing-item a.image { display: block; float: none; } .display-posts-listing .listing-item .title { width: 100%; margin-left: 0 !important; } -
Hey Scared, thank you for helping. I am looking at medium image size length right now. Can you write me a code that would be able to put the 3 posts all on one line? Horizontal across with their post titles all the same size box underneath regardless of how long the title is? This way here the images aren’t too small for the computer and it isn’t too big where it takes away from my slider up top.
I also would like to know what the correct size is for medium images so I can start cropping all my images accordingly so everything can be uniformed.
-
-
Also on my mobile my header image fits perfectly and you can see the sub title and all but on the pc site the sub title is cut off and so is a bit of my logo. Is there a way to push the line down to incorporate my whole image?
-
Hi, on changing the display posts stuff on your main page to three columns, you can add the following custom CSS, but be aware that although this works on the majority of Chrome, Safari and Firefox browsers, Internet Explorer, only on version 10 and later, and 10 can be a bit finicky. I’ve limited this to 600px and wider screens. Below that, it will go back to a single column otherwise the images and such would be too narrow. I also decreased your title font size in the media query otherwise longer words start to break.
@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: 30%; } .display-posts-listing .listing-item a.alignleft { margin-right: 0 !important; } .display-posts-listing .listing-item .title { font-size: 1.5em; } }In your header, I’m only seeing the title, no other lines of text when I view the image separately. The title is showing completely on my iPad and iPhone. Did you change header images?
-
First of all thank you very much for that code and your continued help with my site. I really do appreciate it.
I changed the header back to an old image because I wanted to test something. But I wanted to know is there a way to always have your header and tab bar show up top even as you scroll down the page it will always be up top to access.
I imputed the code now I just need the all the blue boxes with the post titles to be uniformed like let’s set a dimension that would fit for every title so some boxes aren’t bigger than others and everything will all look the same. The next challenge is I need to know how to get all my images the same size so they aren’t exactly how they are looking now.
Third I notice on the ipad and when I put my iPhone horizontally there isn’t any space between the posts on the sides of each other it is all squished together. On the pc though it looks good.
Last but not least my social media icons. We were working on it a couple of days ago to make it a square as opposed to it going straight down a vertical line but it keeps going straight down. I want it to be a box shape or a square shape on the ipad and the pc. Also on the ipad my iTunes button is getting clipped at the bottom. I need to extend the button so it fully shows.
-
I understand with smaller screens like phones or smaller tablets the posts will come out vertical and I am perfectly fine with that. I just want on the pc and ipad’s for it to come out horizontal. I just noticed on the pc some images are all squished together. Podcast episodes, sports articles and social topics are squished together but entertainment reviews isn’t. I am not sure if that is a code thing or because of the images. But the spacing for entertainment reviews has what I want consistent for the rest of the postings.
-
I was just checking on the ipad and the spacing for all the sections are squished. On the pc though entertainment reviews looks the best but I am not sure it is even spacing all around so another thing would be to have even spacing between each post.
-
I got the “Sticky” menu and “Sticky” tab so I fixed this issue
“I changed the header back to an old image because I wanted to test something. But I wanted to know is there a way to always have your header and tab bar show up top even as you scroll down the page it will always be up top to access.”
-
Hey Scared, I went through some of my css and deleted things I found repetitive and tried to clean up the site. Deleted the sky blue boxes, put the post title text and date to the left instead of centered.
What I am now trying to fix is:
– figure out a similar sizing for the images in order to have the posts be even with each other.
– Add spaces between the posts in each section.
– Change the sizing in between the post titles text lines of the post (from double to 1.5, or smaller if needed)
– figure out a way to differentiate an image being put into the slider and the regular article image, because the slider is 1110×555 but I know the medium frame isn’t those dimensions. So how do I keep every image uniformed in the medium frame, even with the post slider images having to scale bigger. If that makes sense.
– fix the itunes logo being cut off on either the right or bottom on the iPad when it is vertical the button is not showing the full image.
– figure out a way to include the logo into the sticky menu on the top.
-
I know I probably didn’t delete all repetitive coding on my site but I got ride of a couple of lines.
-
-
Ok Scared I keep plugging away at my site and I found out how to create the spacing I was looking for through your code by adjusting the margin-right to 35 instead of 0.
I was given this code to have all the images cropped instead of wrapped.
.display-posts-listing .listing-item a.image{
max-height: 125px;
overflow: hidden;
}I was also told “The better option for that would be to utilize a specific image size and stick to that size in choosing your Featured Images.” I think 405 x 270 would be a good size for all the images to be on the front page. The thing is I know the slider is 1110 x 555 so I’m a bit confused with how to work around this. If there is a way.
I also see certain posts titles kinda run into the next post titles text as well. The titles are going through the gaps that I made for each post. Is there a way to make sure that doesn’t happen?
Still can’t figure out what’s up with my iTunes button and not sure how to get my logo sticky with the top bar menu. Or fix my social media icons so it stays a as a box or a cube on the iPad. I also see my social media icons got really small again when looking through mobile
-
On the post titles, I think the main thing is just the combinations of words where there might not be a clean break point for wrapping words. On the images for those display posts, since they are standard posts as well, that would appear in the full blog listing, I would not suggest making the original images smaller, I would stick with the standard size and let the WordPress software downsize them as needed. What I would suggest though, along these same lines would be to keep the proportions the same. 1100 x 555 would be a width to height margin equal to that, which is 2 to 1. We could shift some existing margins off of the display post listing images and into the main listing item, which seems to work better. Find this rule in the 600px media query and modify it to look like this.
.display-posts-listing .listing-item { max-width:30%; margin-left: 10px; margin-right: 10px; }Then, find this rule in the 600px media query and change the two margins to 0.
.display-posts-listing .listing-item a.alignleft { margin-right:0 !important; margin-left: 0 !important; }See how that looks to you.
-
Looks good, I adjusted the codes as you said and it looks better on the eyes. Thank you!
Now it’s just these images on the front page I would really like them all to be uniformed they are so close to being a similar size but it’s pretty noticeable they aren’t all the same sizes. Take a look at the Rosecrans under the entertainment review section how that picture is way off. That picture is also a slider picture too so I am not sure how to go get all my images aligned on the front page but also have the pictures in the slider to look good as well.
Three more side issues:
Is there a way to make sure all the post titles are aligned with each other?
The social media icons are displayed on the iPad they are in a square like on the desktop or mobile. I would like that to be square.
How do I add my logo to the sticky menu?
-
The social media icons on the ipad are NOT displayed like on the desktop or mobile. I would like them to be a square.
-
Hi, in one of the Media Queries, we changed the size of the social icons to make them larger. That works down to 768px in width. We can add the following which will address the icon size on 767px and narrower screens/windows. Add to the very bottom of your custom CSS.
@media screen and (max-width: 767px) { .sidebar .widget_wpcom_social_media_icons_widget .genericon { font-size:60px; } }On the images in the display posts shortcode sections, make sure they are all the same ratio of height to width as I mentioned previously. Then they will all come on and display at the same size.
On the post titles, the alignment issues are mostly due to the variation in words in the titles. Let’s try centering them below the images and see what you think. Add this to the bottom of your custom CSS.
.display-posts-listing .listing-item .title, display-posts-listing .listing-item .date { text-align: center; padding-right: 0; }I also notice that your display posts sections are going into the sidebar on the right at certain screen sizes. In the 600px media query, in the .display-posts-listing .listing-item CSS rule, change the width from 33% to 31% and it will corrrect that.
-
Thank you for your response Scared.
Ok I added the social media icon code but I am still seeing the icons go down a vertical line on my tablet when I place the tablet horizontal. When it is vertical it is fine.
I made the image size the same ratio height and width 400 x 400.
I want the post titles to be aligned left but just all start on the same line. I understand that with more words some titles will drop down longer but at least the beginning part of each title should all start level with each other.
I also changed the sidebar to 31% thank you for noticing that. Does it look better and not interfere with anything?
Also how can I add my logo to the sticky menu bar.
-
Every article it says “by: FTESWL” is there a way I can actually put the each writers name that wrote the piece on there instead of it saying “by FTESWL?”
Also when you scroll down on the other pages there is a button that says “older posts” can I change it to say “more posts”
- The topic ‘Image location change’ is closed to new replies.
WordPress.com Forums 