Remove all metadata from Portfolio Item

antogumo · October 2016

Hello I was wondering if this can be done in the responsive version of the page, since when I apply this it works perfectly:

.single-portfolio .post-header .button-love { display: none; }

.portfolio .post-meta { display: none; }

.single-portfolio .post-header .title_wrapper { border-left-width: 0 !important; }

.single-portfolio .single-photo-wrapper .share_wrapper { display: none !important; }

.single-portfolio .single-photo-wrapper .image_frame { margin-left: 0 !important; }

.single-portfolio .portfolio .project-description { display: none !important; }

.single-portfolio .post-nav { visibility: hidden; }

.single-portfolio .single-photo-wrapper .image_frame { border: 0 !important; display: none;}

But then when I go to an smaller screen it shows everything up again, I try this but it didnt work:

@media only screen and (max-width: 767px)

.post-header .title_wrapper h1 { display: none !important;}

@media only screen and (max-width: 767px)

.single-photo-wrapper .share_wrapper {display: none !important;}

@media only screen and (max-width: 767px)

.single-photo-wrapper .image_frame { display: none !important;}

Url: http://guanabarna.com/portfolio-item/prueba-proyecto-2/

Albert · October 2016

@antogumo Not sure what you want to do but please understand that in reference to Item Support Policy, we do not offer customization service. Despite of that, we can tell you that above responsive css is wrong. You missed brackets before and after the css rules. We recommend to look at http://www.w3schools.com/cssref/css3_pr_mediaquery.asp for more details about @media rules.

Thanks!

antogumo · October 2016

Ok yes I understand... But if you could please just let me know which direction to go from here since I think I might be getting close to what I want but Im not there yet.

Here Is what I achieve by using the css mention above for the "big screen":
http://guanabarna.com/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-06-a-las-3.56.03-PM.png

But when using a mobile screen all the information that is not showing is visible again:

http://guanabarna.com/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-06-a-las-3.55.20-PM.png

I tried again this but didnt worked:

@media only screen and (max-width: 767px){

.post-header .title_wrapper h1 { display: none !important;}}

@media only screen and (max-width: 767px)

.single-photo-wrapper .share_wrapper {display: none !important;}

@media only screen and (max-width: 767px)

.single-photo-wrapper .image_frame { display: none !important;}

All I want to do is to have the published by, the date and the share box removed...

Hope you could guide me on this...
Thanks in advance!

Albert · October 2016

But as you can see http://pasteboard.co/bIOJWXCXe.png these already does not exist.

antogumo · October 2016

Yes on a big screen it doesnt exist, but if you see the website using a mobile device they appear again as shown on the screenshot:
http://guanabarna.com/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-06-a-las-3.55.20-PM.png

The problem is on the responsive design of the page, that the information removed, appears again...

Albert · October 2016

So we have only one solution to remove it from all possible devices:

.single-portfolio .post-header { display: none !important; }
.single-portfolio .single-photo-wrapper .share_wrapper { display: none !important; }

antogumo · October 2016

No.. it still doesnt work, I mean when the screen is less than 767px width, the publiched by..., the date appear again...

Albert · October 2016

That's very interesting because as you can see on http://pasteboard.co/c5PtMOMOJ.png the css we gave you above works on 1000% and this screenshot is the best proof of this. You must did something wrong if the css we left above does not work on your end.

antogumo · October 2016

But I did exactly what you told me to...

http://guanabarna.com/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-07-a-las-3.57.20-PM-1.png

http://guanabarna.com/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-07-a-las-3.56.11-PM.png

It works although if I use just the code editor on the browser but if I put it on the Custom CSS on the Betheme Options it wont...

antogumo · October 2016

Solve it by placing the code on the first line of the Custom CSS editor

Albert · October 2016

It means that you did mistakes in your custom css section and that's why any code after the place where mistake was made, does not work.

abtslebanon · February 2017

Hello,

I added the code on the first line and still not working

Thanks!

Bryan · February 2017

Hi,

Could you please provide us with a link to your page? What do you want to hide? Which element

Thanks

Bryan · February 2017

Hi,

Could you please provide us with a link to your page? What do you want to hide? Which element

Thanks

abtslebanon · February 2017

http://abmoodle.org/abtsen/

I want to remove Published by admin at December 1, 2016 for all posts.

Albert · February 2017

@abtslebanon Ok, so to hide this line, please use the following css:

.single-post .post-meta .author-date { display: none !important; }

abtslebanon · February 2017

It worked well.

How can I also remove the Author name from the bottom?

Thank you!

Albert · February 2017

You're welcome

abtslebanon · March 2017

How can I remove the Author name from the bottom?

Bryan · March 2017

Use this CSS

.single-post .author-box-wrapper {display:none !important;}

aszandek · November 2017

Hi, I want to remove 'date' from the arrows of the portfolio items. This is in the arrow class : "div.desc", "span.date", "i.icon-clock". I do not understand how this classes works, what may I use for custom css. This is not worked: ".single-portfolio .icon-clock {display: none !important;}". Thanks all!

aszandek · November 2017

But with this, worked: ".single-portfolio .date {display: none !important;}" :-)

Remove all metadata from Portfolio Item

Comments