Jump to content
Sign in to follow this  
anlinares

Issue with Feature Width

Recommended Posts

anlinares

I have cut the width of the feature slider on the home page to 500px and centered it in the page. However, the image is being cut off at 300px, leaving a 200px wide black background to the right of each image. I've tried to play with the code but can't figure out what is causing this. Any clue? Thanks for your help. My code:

	/*  Home Page Edits */
	
	.page-id-28 #postloop {
	margin-top: 0px;
	}
	
	.page-id-28  #feature_slider div.default-features {width: 500px;}
	.page-id-28  #feature-area {width: 500px;}
	.page-id-28  #feature-footer {width: 500px;}
	.page-id-28  #feature_slider{width: 500px;}
	.page-id-28  #feature-area, .feature-wrap{width: 3500px;}
	.page-id-28  #feature-footer{width: 500px;}
	
	
	.page-id-28  #feature_slider{
	margin-left: 282px;
	margin-top: 0px;
	}
	
	.page-id-28 #features div.dcol-pad {
	width: 500px;
	}
	
	.page-id-28  #features {
	position: relative;
	z-index: 0;
	}
	
	.page-id-28  #content {
	position: relative;
	z-index: 1;
	}

Share this post


Link to post
Share on other sites
Rob
I'd say the 3500px wide might have something to do with it: [code].page-id-28 #feature-area, .feature-wrap{width: 3500px;}[/code] Shouldn't that be just 500px, not 3500px? Also, I'm not sure that [code].page-id-28 #feature_slider{ margin-left: 282px; margin-top: 0px; }[/code] might not be limiting it and perhaps should be 500px instead of 282px.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares
Thanks, rangelone. Indeed, the 3500 should be 500. Thanks for that catch! However, that doesn't resolve the issue. the margin-left on #feature_slider is just to center the slider. When I change that to 500 it just pushes the slider further to the right of the screen but same problem on the image itself. Any other suggestions? I'm using this code with various sizes throughout the site and no issues except on this page. I'm confused!

Share this post


Link to post
Share on other sites
Rob
Are all the images 500px wide and 400px high? I'm not a CSS expert but I've seen irregular image sizes cause similar problems. I'm unsure how to change this. Perhaps one of my colleagues might know, but they're not expected to be in the forum till tomorrow.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares
Yes. I resized all the photos in PS prior to uploading. In the Features admin area I can see the full-width images as they should appear but they are being cut off by - I imagine - some code that I cannot pinpoint. Thanks for your help! Hopefully someone can help me figure it out!

Share this post


Link to post
Share on other sites
Rob
I've not been able to identify the CSS element that's actually causing the image to float left and appear cut off. I've searched everything. I'm sure it's some ubiquitous, insignificant thing. I just don't know what it is. I must apologize because normally, I'm pretty good with these forensic things. You've stumped me, but Danny's in tomorrow morning and hopefully, he'll have a better idea.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
Okay, try this: [code].page-id-59 #feature-area, .feature-wrap { width: 500px; }[/code] I found: [code].page-id-59 #feature-area, .feature-wrap { width: 300px; }[/code] As soon as I changed the 300px to 500px, I saw full width images. I wasn't really looking at or for this. But it worked for me in Firebug.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares
Odd because that was targeting a different page... but it did fix it. Thanks so much for your help!

Share this post


Link to post
Share on other sites
Rob
I know. Absolutely odd. And if you look back, that's the exact same thing I fixed earlier from 3500 to 500. Once you corrected that, it should theoretically have been repaired. But as long as we got it done, that's all that counts! Glad to have helped!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares
Okay... I celebrated too soon! Now that I am uploading the images to the feature slide on page-59 (now the 'Special Events' page), the photos are being blown up to 500 px wide even though the slider is staying at 300 px wide.... so the pictures are being blown up and cut off. The code above that we are currently working with is the culprit (as it should be because this is page-id-59). But if I change it back to 300px wide then the home page is messed up again. HELP!!! Haha! I have to figure out why that code is affecting the home page and the exact same code targeting the home page (page-id-28) is not.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×