Docs

[iamwithU]

That is very very kind of you, Joao. You know I have issues with my borders and you have so wonderfully helped me out in one fell swoop. Thank you!

Just a couple of things on my Shop page (“Our Menu”): when I look at it from my laptop, I still see left and right borders of about 2 cm wide each (filled up by my background image), and blank spaces (in black) on top of 3 cm and bottom of 5 cm. Any way to remove these borders and blank spaces – so that the product photos fill up the spaces and flush to the edges?

On my iPhone, when I look at the 4 variable products (all under “Cookies” e.g. Almond Crunch), it’s ok at first. But when I click “Choose An Option”, the whole screen gets pushed to the left – blocking out words on the left. Is this something to do with my wrong setting of margins?

[iamwithU]

Dear Joao,
Since you have the link to my site, may I trouble you to check what is the problem with my Favicon? I have agonised this for a long time and read all the forums but still could not figure out how to get my Favicon done. So if I write my url or if one reaches my website, you don’t see the Favicon appearing where it should be.

Also, on my Home page, I like to remove the Header button on top of the navbar (the menu bar), as you can see, I have the same name repeated on the main page “myS…”. Hence, there is no need for the same Header button on top of the menu bar in the Home page. At least, for the other pages, this Header button serves a purpose in that when you click on it, it brings you back to the Home page. But on the Home page, this Header button is redundant.

[iamwithU]

I realise the Header button is actually called the “Logo Text” in X. If we remove it from the Home page, it looks fine on the laptop. But I foresee that on the mobile phone, there will be a long blank space right on top of the Home page, next to the menu (the hamburger).

I know this may be more complicated than I had thought. Just wondering – is there an option of removing the Logo only from the Home page in laptop view, but not the phone view? Or make it appear intermittently….? If this is beyond the scope of this Support function, please let me know & I’ll understand.

[Lely]

Hello There,

To remove border on your shop page Our menu, please add the following custom CSS:

.x-boxed-layout-active .has-post-thumbnail .entry-featured {
    border: 0 !important;
}

That CSS will make the image reach the edge of browser.

Regarding the issue on iPhone, can you give us screenshot of the issue?

Your favicon is showing when I check. See attached screenshot.

To remove the logo/brand on top of the menu on homepage on desktop only, please use this CSS:

@media (min-width: 980px){
.home a.x-brand.img {
    display: none;
}
}

Hope this helps.

[iamwithU]

Hello Lely,
Thanks for your response.
When I put in the 1st CSS, the whole Shop page vanished, leaving only the background image filling up the whole screen. (Scary moment!) Perhaps I’ve put the CSS in the wrong place? As I don’t code, could you tell me where or how I should do it correctly?

As for the 2nd CSS, it worked. Thanks. But the navbar (i.e. the words in the menu bar) got pushed up to take the space of the absent Logo. Is there a way for the navbar to stay where it was?

I’m glad to know that the Favicon shows up on your screen. I wonder why it doesn’t show up on my laptop? Also, when I copy my url link for people either on laptop or via phone, the Favicon doesn’t show up as it does for other url & Favicons.

I’ve attached a screen shot of my iPhone. As you can see, if there is a variable product, there will be a button to “Choose an option” (e.g. for “Almond Crunch”). When you click an option, the whole screen gets pushed to the left side, blocking out the words on the left. I suspect my margins are wrong. Could you check if my margin settings for my website are correctly set?

If you look at the “Choose an option” on your computer screen, you’ll notice also that the default grey shading of the button is blocking out the words. Is there a way to apply a CSS to change all the wording for “Choose an option” into white color?

[Joao]

Hi There,

This code would not cause such an issue it is possible that some bad syntax while applying the code like a missing } could be the cause of the issue.

Your Favicon also works fine on my end. Please try cleaning your browser cache and testing it again.

Can you try with a different browser on your iphone and another iphone if possible, I have tested your product page on my telephone and the layout looks normal.

Can you clarify what you mean by ” If you look at the “Choose an option” on your computer screen, you’ll notice also that the default grey shading of the button is blocking out the words. Is there a way to apply a CSS to change all the wording for “Choose an option” into white color?”

Thanks

[iamwithU]

Hi Joao,
Glad to have you back to help me.

Shop Page Margins – Side, Top & Bottom
As I’m a novice, can you guide me where to input Lely’s CSS? Is it on Appearance /Customize /Custom /Edit Global CSS? Do you have to add a blank line spacing before inputting this CSS? I tried but nothing happened.

I input it in at the Custom CSS settings page on Edit with Visual Composer for the Shop page. That’s when the whole page disappeared again.

I hope this CSS can remove the blank spaces on top and bottom of the Shop page too.

Favicon
I use a Mac laptop & despite clearing “History” (cache), I still don’t see my own Favicon when I go my own website. Neither do I see it on my iPhone. When you send my url or website address to another person on email or a phone message, the Favicon should appear next to my URL, right? I don’t see it either.

“Choose An Option” Button on Laptop
Kindly see attached screenshot. Eg if you go to my “Almond Crunch” page, you will see “size” and the “Choose An Option” button. Right now, there are 2 grey shading on top of this button, partially blocking the words “Choose An Option”, which are also in grey color. (This problem appears on my laptop, but not on my iPhone). So I thought it may be good to change the words “Choose An Option” into white color – to make the button more visible. If you have any other suggestions, please feel free to share.

“Choose An Option” on iPhone
After I select an option, the screen shifts to the left, blocking out words. Please see the screenshot in my previous post. (This problem appears on my iPhone, but not on my laptop.) I will borrow a friend’s phone tomorrow to test it out.

Navbar on Home Page
After the Logo is removed on the Home page, the Navbar moves up to take up the space vacated by the Logo. What can I do to keep the Navbar to the same position as before – so that it looks centralised on the left margin?

Look forward to your kind advice.

[iamwithU]

Or rather, the Navbar should look the same as in the other pages – some distance from the top.

[Joao]

Hi There,

This topic is kind of long and confusing already. Let´s try to organize by points the issues you are facing

1- CSS should be added where you mentioned Appereance > Customizer > Custom > CSS – Spacing is not as important on CSS but good syntax is very important, a missing element can cause trouble and create code conflicts.

2 – Favicon – Please remove your favicon and add a new one (can be the same file but with different name) Turn off all the third partiy plugins. Clear your browser cache, test it again.

3 – Color of choose size:

Please add the following code to Appereance > Customizer > Custom > CSS

.woocommerce div.product .summary .variations select, .woocommerce .quantity input[type="number"] ,label {
    color: white;
}

4- Navbar home , Please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar-fixed-left .desktop .x-nav, .x-navbar-fixed-right .desktop .x-nav {
    margin-top: 7em;
}

5- To remove the space from the bottom of your shop page, add the following code to Appereance > Customizer > Custom > CSS

.archive.post-type-archive.post-type-archive-product #x-content-band-3 {
  display: none;
}

Hope it helps

Joao

[iamwithU]

Awesome Joao. You resolved most of the issues.

1. Shop page margins – After putting in Lely’s CSS, the big left and right margins on still remain, with the background image 🙁

2. Favicon – let me read up how to do that again.

3. Color of button – your solution works. Thanks

4. Navbar home – your solution works. But all the Navbar in the other pages also got pushed down…

5. Shop page bottom space – your solution works. What about the top space? How do I remove that blank space right on top of the page?

As mentioned yesterday, i checked out a friend’s mobile phone, and find the same problem:

6. “Choose An Option” on iPhone
After I select an option on the product page (e.g. “Almond Crunch”), the screen shifts to the left, blocking out words. (This problem appears on my iPhone, but not on my laptop.) Any advice?

Thanks Joao for your patience.

[Joao]

Hi There,

This topic is kind of long and confusing already. Let´s try to organize by points the issues you are facing

1- I guess I understood what you mean by margins, please use this code instead of Lely´s

.archive .x-boxed-layout-active .entry-wrap:first-child {
    margin-top: 0;
    padding: 0;
}

2 – Let us know how it goes,

4- Please use this instead:

.home .x-navbar-fixed-left .desktop .x-nav, .x-navbar-fixed-right .desktop .x-nav {
    margin-top: 7em;
}

5- Please point exactly which space you are referring to.

6- Please provide the URL of your Almond Crunchy Page.

Hope it helps

Joao

[iamwithU]

Hi Joao,
Thank you for staying with me on this. I truly appreciate it.

1. Shop page margins – still there after putting in the new CSS. The left and right side still has the empty space taken up by the background image. The top part of the whole page still has the empty black space. If we can’t remove the left and right empty margins, then I’ll just revert to having the Navbar on the left. But at least, kindly help to remove the funny blank space on the top of the Shop page before the title “Our Menu” appears.

(I’ve removed Lely’s CSS – but I’m now confused as to how many of the curly brackets “}” should be there before and after each CSS. I see some extra curly brackets somewhere and not sure if they should remain there… Can you please check if I have removed these curly brackets properly?)

2. Home Navbar – yes. Now it works beautifully there, and on other pages too. Thanks very much.

3. Almond Crunch URL is http://myscarletworm.com/wp-admin/customize.php?return=%2Fwp-admin%2Fupload.php
It’s on the mobile phone that the screen shifts to the left after I’ve clicked “Choose an option”. The words are then blocked.

Look forward to hearing from you again.

[Rue Nel]

Hello There,

Thanks for updating in!

#1] Do you want something like this? http://prntscr.com/e0h7r1
If that is the case, please make use of this code instead:

.archive .site,
.archive .site > .x-container.max.width {
    width: 100%;
    max-width: 100% !important;
}

.archive #x-content-band-1 .h-custom-headline {
    margin-top: 0 auto;
}

#3] I could not replicate the issue. Could you please send us some screenshots so that we will have an idea of what is going on?

Thank you in advance.

[iamwithU]

Thank you Rue NeL – it works! Fantastic. Just that there’s still some blank space right on top & bottom of the Shop page. Is there a way to remove most of the empty space – so the top starts with “Our Menu” and ends with the last product image? It looks like there’s some holder or container box causing the extra space on top and below.

Would you be so kind to give me the CSS to retain the Navbar (or menu – that looks like a hamburger & my logo) for the Shop page on mobile phone & iPad views? For these mobile users, they don’t have to scroll right to the bottom in order to exit the Shop page.

As requested, for the screen shot, please see my post above #1342692. Let me know if you need any other info. Hope to hear from you soon.

[Rad]

Hi there,

Sure, please add mtm to your custom headline’s class input, just like how you added the mbn, separate them with space. Then make sure to remove the line breaks within your custom headline.

Example,

Our Menu

should be just a line of text

Our Menu

And for displaying mobile menu on shop page, please change this existing CSS

.archive .x-navbar {
    display: none;
}

to this

@media ( min-width: 980px ) {
.archive .x-navbar {
    display: none;
}
}

About the choose option, it’s mobile browser’s styling. If you’ll check it on another mobile, it’s different.

Thanks.

[Author]

Posts