CSS code to adjust featured image sizes as appear on my home page
-
hello- how can i adjust the size of the “feature photos” as they all appear from my portfolio on my website’s landing/home page? my home page has all the photos very small… so i wanted to adjust their sizes. just like we can customize font sizes….? i understand these generate in my portfolio, but wanted to custom design (code) how the home page appears…. thanks
The blog I need help with is: (visible only to logged in users)
-
Hi there, the main content area is set to a maximum width of 640px. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and then adjust the 640px value as desired.
.home .hentry.page { max-width: 640px; }I’ve limited the above to only your home page by using the “home” CSS body class from the opening body HTML tag on your site.
-
hi happiness – :)
thanks for the advice. unfortunately im still not seeing any change in the home page images…. ive also tried changing the 640px value in the code you wrote above…. as well as tried changing the value in the “Media Width” field box… but still nada. ; -
…in addition, i was trying to sort the order that the portfolio projects (Feature Images) appear on my home page. so i added the sortby=title code, but it only puts them in alphabetical order. how can i custom sort the projects as well as adjust image size (above inquiries) as it all appears on home page?
-
Hi, I went into your customizer and changed the 640px to 1040px and it widened the content and images. I would suggest changing the max-width to 1040px, click save and publish and then visit your site and maximize your browser window.
The orderby=title does not accept a list of titles such as you have between the parentheses. It sorts alphabetically by title. If you want to set a certain order, you will have to order by date, which is the default, and then change the published date on the portfolio projects so that they are in the order you desire. You can use this support document on Scheduling Posts as a guide for changing the dates on the projects.
-
hello again; thanks for the pointers with getting my home page to how i wish it to appear.. definitely got closer! ;)
RE: sort order = i did all of those steps and have the sort order now. (but there should be a simpler way of clicking & dragging in a Projects or Pages menu in order to re sort….)
RE: image sizes = what you did on 1040px seem to work and is better. is that the maximum allowed? i tried entering even higher amounts (2000 or 4000px) but there were no further changes after publishing?
-
RE: sort order = i did all of those steps and have the sort order now. (but there should be a simpler way of clicking & dragging in a Projects or Pages menu in order to re sort….)
Drag and drop, or some other simple way of reordering portfolio projects would be awesome, and it is something that will be implemented although I’m not sure when. It is not a small change to the code base. Stay tuned is about all I can say at this point. :)
RE: image sizes = what you did on 1040px seem to work and is better. is that the maximum allowed? i tried entering even higher amounts (2000 or 4000px) but there were no further changes after publishing?
If you set it to 4000px, and someone happens to have a monitor that is that wide, and they happen to have their browser window maximized, the images will take up the entire area (less the sidebar). Most people don’t have 4000px wide monitors. I have a 27″ monitor and it is only 2560px wide, and I never have my browser window set more than about 1200px in width. I’m seeing your monitor is 1280px in width, which means that you are going to see the images as large as they possibly can be if your browser window is maximized. Personally I would probably not set it more than 2000px since the number of people that have their browser windows more than 1500px wide is actually quite small.
-
ahhhh now it makes sense! especially when i tested it out and viewed my home page on my other [larger] monitor! :)) thanks so much for explaining all of that – especially on the monitor size and px width.
you have been super helpful! have a good one!
-
- The topic ‘CSS code to adjust featured image sizes as appear on my home page’ is closed to new replies.
WordPress.com Forums 