Wrapper to wide

chakana · June 2016

I have a portofolio entry built with Muffin Builder.

One of the items is Blog

I have specified Blog Style to "Classic"

As you can see in the image below, when the screen is at full width, the wrapper is wider than the image it contains. The image that appears is the featured one of the related post, with a size of 231x231. I would like the wrapper not to be so wide on a wide screen because it does not look good. Please cam you help?

Thanks, :-)

Albert · June 2016

Hi,

the only thing you can do is remove this border completely. If you send us link to such page, we will tell you how to remove it.

Thanks!

chakana · June 2016

Thank you

This is the page: http://6d8.a33.myftpupload.com/portfolio-item/andean-pranic-healing/ ‎

I look forward to your reply, :-)

Albert · June 2016

Ok. So to remove border and box shadow around those images, please use the following css:

.blog_wrapper .image_frame, .blog_wrapper .wp-caption { border: 0 !important; }
.blog_wrapper .image_frame, .blog_wrapper .image_wrapper .mask, .blog_wrapper .edd_download_image::after { box-shadow: 0 0 0 0 !important; }

chakana · July 2016

Thank you for the assistance

It does not seem to work, not even after I removed the comma after the first .image_frame which does not seem to go there. It is not a problem of caches, because I have emptied them.

I would appreciate a lot if you had any other suggestions?

thanks

Albert · July 2016

Really? So maybe you pasted this code in a wrong place?

chakana · July 2016

I pasted in in Editor - Styles.css that I have defined for the child theme. I have other CSS there that seem to work OK.

Please could you revise the code as it seems that there are commas that may not be required, which tells me that perhaps something is wrong with the code?

Thank you so much for your great assistance.

Marc

Albert · July 2016

You pasted it in the wrong place then because each custom css need to be pasted under Theme options > Custom CSS & JS > Custom CSS section.

chakana · July 2016

It keeps not working even when I past it there, so I fell there may be something wrong with the code. Do you want access to my backend?

Albert · July 2016

Sorry but it's not true and the following image is the best proof that above css works as should http://pasteboard.co/270VpcXZ.png - we noticed that your code doesn't look the same as the one we gave you above. Looks like something was missing.

chakana · July 2016

Hello. First of all, thank you for your kind assistance :-)

The code looked different because seeing that it did not provide the expected results I started tinkering with it, however you can be assured that I tried the one you provided me and I have reverted it back to it.

I think the problem is that I was expecting the writing to align to the image, without the space in between and also the blue area that appears when hovering over the image to adjust to the new size of the image too. Seeing that this was not the case, I though that something was wrong. (See linked image: http://pasteboard.co/275L97tB.png)

Is it possible to provide further modifications not to leave that empty space between the text and the image?

Alternatively, what about an image that adjusts to the rectangular wrapper of 442x216 px? How to do that and if I do so, is it going to affect also the featured images of the portfolio posts of the front page, where I use the Masonry Blog Style, and which I expect them to be square? (see linked image http://pasteboard.co/276Ee3eg.png)

Thanks

Albert · July 2016

Ok. So to move description closer to the image, you need to decrease space for the blog images but increase width of description with the following css:

.column_blog .post-photo-wrapper { width: 20% !important; }
.column_blog .post-desc-wrapper { width: 80% !important; }

chakana · July 2016

This solution does the job beautifully, but it also reduces the images of the Blog item of the main page, where I'm using the Masonry Blog Style (http://pasteboard.co/7Fx0qGjP3.png). How to limit it to the Classic view, which is the one in which I face the problem?

Thanks :-)

Albert · July 2016

To make those changes for the classic one, you need to use the following then instead:

.column_blog .classic .post-photo-wrapper { width: 20% !important; }
.column_blog .classic .post-desc-wrapper { width: 80% !important; }

chakana · July 2016

thank you so much for being so patient.

It works now and it looks beautiful.

Another 5 star for your theme. :-)

Albert · July 2016

You're welcome!

Wrapper to wide

Comments