[Resolved] Gap between "button" and image – I need it removed

[Author]

Posts

[brendaT-2]

Tell us what you are trying to achieve:
I want to add a "featured" / "new" tab (image) to my loop for posts that are...featured or new.
I have everything working, but there is a gap between the tab & the post image.
Pls refer to uploaded image. You already have links to my staging site, and sign ons, so pls use them.
How can I remove the gap?

What is the link to your site? )specific page showing featured & not featured posts.
hidden link
I dragged across screen to highlight the issue.

no rush...its a staging site and I am still tweaking things before moving to PROD.

[Minesh]

Hello. Thank you for contacting the Toolset support.

I checked your previous tickets and I see most of them are resolved and once the ticket is resolved the system automatically removes the shared access details.

Can you please share admin access details and let me review your current structure.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I can see you are using the grid so that you will have to target the elements you have added to the grid.

I've added the following class to the image block as you can see with the following screenshot:
- hidden link

And then to the view's custom CSS and JS section I've added the following CSS code. You can add your target classes specifically if required to your button block and like I've added for the image block "nomp " and then add the related CSS code to set the margin or padding to 0 as required.

.tb-button__link {
margin-bottom: 0px !important;
}

.nomp {
margin-top: 0px !important;
}

I can see the button image is displayed on top of your logo:
- hidden link

you can edit your other views accordingly and set the CSS classes as required and add the custom CSS code as required.

[brendaT-2]

Hi Minesh, that has worked well for the "new" post view.
But It also changed my results page - the tab on featured listings, now only appears if the post was a featured post AND new post as well...in trying to look at the logic - which was working before the CSS & class was added, I couldn't understand why that logic would have changed/affected in that manner.
Now however I cannot sign in to the site. I looked at the developer/inspect and it said "Page layout may be unexpected due to Quirks Mode". Googled that and it talks about IE. I am using a MAC OS, with chrome.
I can see the home page: hidden link
I cant see the login page: hidden link.
I cant see the directory search page: hidden link

do you have any quick answers why this might be behaving like this since making the change? Hope you can help.

[brendaT-2]

Hi Minesh, an update...I got into the site thru the backend godaddy portal, and removed the CSS from the results page and I now have access back.
I didnt know how to add CSS code so I googled it. I must have done something wrong....maybe I need a screen shot from you to show me how. the screen shot of the class code was great!

[Minesh]

I already shared the screenshot here it shows how I've added the class name:
=> hidden link

And the CSS I've shared you should add it to your view's custom CSS box. Here is the related Doc:
- https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-view

[brendaT-2]

My issue is resolved now. Thank you!