how to oversize image in twentyeleven

  • Hi guys,
    ok, so I have an image which i would like to be larger than the maximum size the theme will allow… So I’ve found that even if i place an image that’s 1000px wide onto the page, the theme will re-size it to around 544. I understand that i will be overlapping the sidebar margin (if i can overide the function) but i just need to gain a few extra pix. I’ve looked through the function.php but cant find the default sizing code. I’ve also found some custom size code but when i insert it, im getting bad code messages.
    https://www.befood.co.uk. The said image is a menu but currently with seasons greetings.
    Please help as i think there is too much wasted space on this theme.

    Thanks,

    Ben

Viewing 3 replies - 1 through 3 (of 3 total)

  • a few clicks with Forefox’ web developer add-on reveal this style as the cause:

    /* Images */
.entry-content img,
.comment-content img,
.widget img {
	max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}

    115% might just work; however, removing it will possibly have weird layout effects on narrow screens and mobile devices …

    Thread Starter Benjycreeper

    (@benjycreeper)

    Hi Alchymyth,

    thanks for the quick reply. I gave this a go and you were right, it had a the strange effect of narrowing the column widths on mobile devices.
    Where can i alter the padding to the left of the image or somehow align the image further left? Maybe this way i can squeeze the offending image over to the very left of the page then increase the width % in style to get the increased image size without messing up my margins.

    Thank you for your time.

    Ben

    Thread Starter Benjycreeper

    (@benjycreeper)

    For anyone with the same question, I’ve found a trick that has given the result im after.

    In the style.css (in child theme) i used the left and right margin % for the main content. Going from the original 7.6% to whatever fits best. (in my case 3.6% and 5%).

    #content {
	margin: 0 34% 0 3.6%;
	width: 65%;
}
#secondary {
	float: right;
	margin-right: 5%;
	width: 18.4%;

    This has allowed me to narrow the white space either side of the content and therfore allow an image that appears larger.

    Doing it this way has also means that mobile devices aren’t effected by funny content widths.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how to oversize image in twentyeleven’ is closed to new replies.