Display problems when using Elementor + Icon 3 Demo

Support
#3

Hi Thai,

As always thank you very much for the quick response.
I already followed your instructions so in order to see my homepage just go to maleoptimization.com
If you need anything like a temporary admin login just let me know.

Have a good afternoon,
Carlos

#4

Hi Carlos,

  1. For the gap, please add this CSS to your Theme Options > CSS. But this will likely not needed once you did the #2 
.hentry .entry-wrap, .search-results .x-container>.product .entry-wrap {
    padding: 0px;
}
  1. For the icon 3 demo, I think you’re referring to the sidebar, right? In that case, please change your page template to Blank - No Container | Header, Footer.

Save it, and reload that page (to make sure it’s blank template first) then scroll down until you find this section

And turn it to Yes.

These sections are within the page you’re editing, and screenshots are taken while Gutenberg is active.

Thanks!

1 Like
#5

Hi Rad,

Thank you, the CSS line solved the header problem instantly.

What I´m trying to do is keep de right sidebar but still be able to see my whole Elementor page.
I don´t know if that is possible, if not then I´ll stick to the blank - no container template.

Thanks a lot,
Carlos

#6

Hi Carlos,

You can try adding this custom CSS:

.home .entry-wrap {
    padding: 0
}
.home .entry-wrap > .x-container.max {
    width: 100%;
    max-width: 100%;
}
.home .elementor-section-full_width,
.home .elementor-section-stretched {
    width: 100% !important;
    position: relative !important;
    left: auto !important;
}

The custom CSS above will affect the home page only.

Regards!

1 Like
#7

That was perfect Thai, thank you so much!

So I guess that if want to apply the same to other pages I´ll have to change the beginning of each code line for (let´s say) .shop instead of .home?

Thanks again,
Carlos

#8

Hi Carlos,

Yes, that is correct. But not all page has a body class name like that (.home, .blog, .shop). For standard pages and posts use the page ID class instead (.page-id-414) where 414 is the page ID.

How To Locate Post/Page IDs

Hope it helps,
Cheers!

1 Like
#9

Hi Rad,

How can I apply the same CSS line for removing the gap to other pages in my site? I´ve tried by changing .hentry for .page-id-XXXX but (of course) it didn´t work…

Thanks a lot,
Carlos

#10

Hi Carlos,

Use the .page instead if you want it to apply on all pages.

Please add this to Theme Options > CSS

.page .entry-header {
	display: none;
}
.page .hentry .entry-content {
	margin-top: 0;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

1 Like
#11

Hi Friech,

Thank you so much for providing the CSS lines. However when I use them The titles and prices of my WooCommerce products dissapear.
Do you think there´s any way to fix that and still remove the white gap in the header?

Thanks a lot,
Carlos

#12

Hi Carlos,

The product title & price will not display because the color is white, please add this custom CSS to change it to black:

.woocommerce div.product .summary .product_title,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description h2 {
    color: #000 !important;
}

I’m not sure which white gap you’re referring. Would you mind providing us with some screenshots?

Many thanks.

#13

Hi,

This is the screenshot I attached since I first started this topic: https://imagebin.ca/v/4UGsC3dVtz9J
You´ll see the white gap I´m referring to circled in red.
What I´m trying to do is get rid of that gap in all pages, but when I used the CSS lines provided by @friech the titles and prices of my products dissapeared.
I want to keep the prices and titles for my WooCommerce products white, as that´s what works best for my site´s design, I just want to get rid of the gaps.

Thanks,
Carlos

#14

Hello Carlos,

Thanks for updating the thread.

On my end I don’t see the gaps on home and or inner pages. I suggest you to please clear cache and try loading the website again.

Thanks.

#15

Hi @Prasant,

You´ll find it if you visit maleoptimization.com/tienda
And I have the feeling that the gaps will continue to appear in further page additions. What I´m requesting is a CSS line that makes sure that the white gap doesn´t appear on any page in my website.

Thanks,
Carlos

#16

Hello Carlos,

Thanks for asking. :slight_smile:

White space is showing because the color of title has been changed to white color and because of that text is getting disappeared in background.

If you would like to hide that then please add following CSS under X > Theme Options > CSS:

.entry-header {
    display: none;
}

.entry-content {
    margin-top: 0 !important;
}

Thanks.

1 Like
#17

Thank you very much @Prasant!
That worked perfectly, I really appreciate your quick and effective response.

Best,
Carlos

#18

You are most welcome. :slight_smile:

#19

Hi @thai @Prasant @friech ,

I´ve tried using this code lines in order to see my product titles and prices, but unfortunately that didn´t work.
Please take a look at my store in https://maleoptimization.com/tienda and scroll down to see the product archives. You´ll see that there´s no title, price nor add to cart button.

What can I do to fix this?

Thanks,
Carlos

#20

Hey Carlos,

To fix this, please add the following code in the Theme Options > CSS:

.product .entry-header {
    display: block;
}

Let us know how this goes!

#21

Hi,

Thank you so much, that worked.
However, it only shows the prices when you hover over the product and it doesn´t show the offers, as many of my products have a discount over the original price.
Is there a way to put all this information staticly below the product image?
And where can I change the color of the add to cart button?

Thanks a lot,
Carlos

#22

Hi There,

To display the sale price, please add this custom CSS:

.woocommerce li.product .entry-header .price>del {
    display: inline-block;
}

To change the add to cart button’s color, please add this:

.woocommerce li.product .entry-header .button {
    background-color: #ff7ee2
}

Hope it helps :slight_smile: