Blog photos won't fill full feature photo graphic box correctly
-
Hi, I’m trying to fix my blog page on my site, specifically http://annaosetroff.com/brisbane_photographer_latest_work/ The photos that I set as “featured images” on each blog display on the main blog page incorrectly. They won’t fill the entire graphic box. If I enable a sidebar the images to do display correctly and fill the whole frame but it then makes the page much smaller so I don’t really want to display it with a sidebar. Does anyone know a css code or similar that would enlarge these featured images? I’m using the Button theme. I would greatly appreciate any help! Thank you so much in advance! Anna
The blog I need help with is: (visible only to logged in users)
-
When no sidebar is present, the overall width of the site is reduced so that the text-based content doesn’t get too wide for easy reading. In general, it is typically suggested that text content not be over 500-750 pixels in width. It’s a bit more complex than that, but that typically works as a general rule. If you wish to set the overall width back to what it was with the sidebar, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS
.no-sidebar .site { width: 100%; }and then in the Media Width field below the CSS area, enter 980.
-
Hi thesacredpath!
I’ve just tried to paste in your suggested text and it did indeed change the size a little bit smaller but alas the photos still aren’t filling the featured images boxes.
I’m wondering if there’s a way to inspect and change the code so the image fills the whole box instead of a portion of it. When I play around with numbers little bits of sizes change in and around the box but alas I just don’t understand what I’m doing.
The code I’ve been fiddling with is:
.featured-image {
line-height: 0;
margin: 0 0 1.5em;
position: relative;
text-align: center;
}
.featured-image img {
max-width: 99.9%; }
.featured-image .shadow {
box-shadow: inset 0 0 85px 1px rgba(0, 0, 0, 0.1);
display: inline-block;
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.featured-image:before, .featured-image:after {
background-image: url(/wp-content/themes/pub/button/img/corner.svg);
background-size: 45px;
background-repeat: no-repeat;
content: “”;
display: block;
width: 45px;
height: 45px;
position: absolute;
top: -1px;
left: -1px;
z-index: 1; }
.featured-image:after {
left: auto;
right: -1px;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.featured-image > .corners:before, .featured-image > .corners:after {
background-image: url(/wp-content/themes/pub/button/img/corner.svg);
background-size: 45px;
background-repeat: no-repeat;
content: “”;
display: block;
width: 45px;
height: 45px;
position: absolute;
bottom: -1px;
left: -1px;
z-index: 1;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
.featured-image > .corners:after {
left: auto;
right: -1px;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg); }and it does vary the image size but I just don’t know which bit might scale it up more. Any thoughts? I could be completely wrong too though …
Thanks!
-
upon further investigation .. i’ve been at this for 10 hours now.. I can make the featured image bigger to fill the box if I change these numbers
“<img width=”760″ height=”507″ src=”https://annaosetroff.files.wordpress.com/2015/12/annajoe_boardgame_engagementphotographybrisbane_lowroadcafe_annaosetroff-101.jpg?w=760″ class=”attachment-button-featured size-button-featured wp-post-image” alt=”AnnaJoe_BoardGame_EngagementPhotographyBrisbane_LowRoadCafe_AnnaOsetroff-10″>”
The problem is this only fixes individual images and I have a few hundred images that need fixing. This “fix” doesn’t necessarily lock the image to the featured box though, it still slides around and changes in size so it’s not right.
Any more thoughts on how I can fix this coding issue? Or should I be getting in touch with the web designers? I don’t think I’m the only one with this problem.
Any help appreciated.
-
I don’t see that you added the 980px to the Media Width field below the CSS input area in the Customizer.
…and then in the Media Width field below the CSS area, enter 980.
That tells the WordPress and theme software that the theme is now wider and the images can be up to 980px in width.
-
Hi thesacredpath,
I did have it in there for a while but as much as I wanted it to work it just didn’t resize it properly and still had white/shadow edges around every picture so I deleted it.
My partner has potentially fixed the problem now after 24 hours of fiddling and it seems to need to css added in (below)
.featured-image {
line-height: 0;
margin: 0 0 1.5em;
position: relative;
text-align: center;
}.featured-image img {
width: 100%;
height: 100%;
}.featured-image .shadow {
box-shadow: inset 0 0 85px 1px rgba(0,0,0,0.1);
display: inline-block;
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
}The 100% with the original word ‘max’ removed seems to be the key. This enlarges all featured images on the blogs page.
Just thought I’d post it in here as I’ve noticed quite a few other users of the button theme with the same incorrect featured image display.
Thanks!
-
Super and thanks for posting. I took a look at your site on my computer, ipad and iphone and it seems to work well on all.
Tell your partner nice job!
- The topic ‘Blog photos won't fill full feature photo graphic box correctly’ is closed to new replies.
WordPress.com Forums 