images and video size inside each post

Hi Marco,

You could potentially increase the size of your images using some custom CSS.

To get started, first add an image to your post/page editor and then switch to the Text tab in the editor’s upper right hand corner. You’ll be able to view the HTML for your image via this tab. It’ll look similar to the following:

<img src="image.jpg" class="alignnone size-medium wp-image-1686"/>

Add a new class – image-large – to the list:

<img src="image.jpg" class="alignnone size-medium wp-image-1686 image-large"/>

Finally, add the following custom CSS (inspired by the CSS used in Twenty Sixteen to create larger images) via Appearance > Edit CSS:

.image-large {
    margin-left: -40%;
    margin-right: -40%;
    width: 180%;
    max-width: 180%;
}

Let me know how that goes or if you have any questions along the way.

Ciao Siobhan,
Thanks for your assistance. I read your suggestions, but honestly I didn’t understand how to do.
This is a post from my blog (for example):

https://www.motorsportrepublic.com/citroen-c3-max-un-giro-ad-adria/

Here the html code of the only picture in the post:

<p style="text-align: center;"><img class="aligncenter size-large wp-image-205" src="https://www.motorsportrepublic.com/wp-content/uploads/2016/10/DA5D5363-1024x682.jpg" alt="Citroen C3 Max" width="1000" height="666" /></p>

I would like to have the image always full-width (as well as video) when the post is image format (and not standard)

How should I add this new class image? This I do not understand.

I also tried to insert the CSS code inside appearance / CSS but nothing happens. Help me;-)

Thanks very much

• This reply was modified 8 years ago by emmediemme.
• This reply was modified 8 years ago by emmediemme.

I’m not currently seeing the custom CSS that I provided when inspecting your theme’s code.

Could you try adding the following via Appearance > Edit CSS?

.size-large {
    margin-left: -40%;
    margin-right: -40%;
    width: 180%;
    max-width: 180%;
}

Let me know when you’ve saved the above and I’ll take another look.

Thanks!

Hi Siobhan,
I just put the CSS code in Appearance>Edit CSS. Nothing happens ??

Thanks again
Ciao
Marco

Hi Marco,

I can only see the following after inspecting your site’s code and looking at the custom CSS that’s been added:

.posted-info {
    display: none;
}

.site-banner-header .banner-featured {
    visibility: hidden;
}

Did you remove the custom CSS that I added? If not, please double check that there are no stray curly brackets or semi-colons that could be preventing it from working correctly.

If you you did remove the custom CSS, please add it back if you’d like me to look into why it’s not working.

Ciao Siobhan,
exactly, but after the code that deletes the tag “featured” I put in what you wrote to me

.size-large {
margin-left: -40%;
margin-right: -40%;
width: 180%;
max-width: 180%;
}

Thanks

• This reply was modified 8 years ago by emmediemme.
• This reply was modified 8 years ago by emmediemme.

Hi @emmediemme,

I’m not able to access admin pages on your site. Could you please copy/paste the code to your next reply?

Fantastic your speed. Done ??
If you wont I give you (via mail) my login data

Hi @emmediemme,

Could you please copy/paste all of the custom CSS that you’ve added to that editor or add a screenshot to your next reply?

Although that particular snippet is correct, it’s not being added to your theme’s code.

Hi @siobhan

How do I add here the screenshot of my css?

You can upload the screenshot to your Media Library and then add the URL to your next reply. Alternatively, you can use a third-party image sharing service, such as Droplr.com or Imgur.com.

https://www.motorsportrepublic.com/wp-admin/upload.php?item=753

@emmediemme: I need a publicly available link. I’m not able to access the URL you linked to.

Or this https://d.pr/BDjE via Droplr.com

Hm. That’s strange. It looks like the CSS has been entered correctly from the screenshot, but it’s not being added to your site’s source code.

Could you try moving the .size-large snippet so that it’s above the other two snippets, to see if that makes a difference?

Thanks!