Support Center Visit Demo License manager Buy @ envato

Responsive button

charlipcharlip
edited August 2020 in Theme support
Hi, 

I have a couple of questions where I'd really appreciate some help...


1. The button for the shop product slider when looking at it on a smartphone is not showing correctly. It's partly cut off. Can you please let me know how to fix this and also make it sit centrally above the product on a mobile only?
2. Is it possible to make the previous and next buttons sit in a circle for the shop and testimonials sliders? It looks a bit odd at the current shape (my client wants rounded edges for all other buttons on the site though, but I don't want it the same for these buttons!)
3. The hamburger menu is floating halfway down the page in responsive on my client's phone (iPhone) but it is fine on mine (Android)... how can I make it stay in the sticky header?
4. How do I add gradients to buttons in layer slider? I can not get it to work like I have with custom CSS on the rest of the site.
5. I want to hide the social icons only on responsive in the action bar, but keep the other info... How do I do this?

I have tried some CSS but it's not working... 

@media (max-width:768px) {
#action_bar . social i{display:none !important;}
}

Have I written it incorrectly?

Thank you :)

Comments

  • PabloPablo
    Hello,
    1) About disabling whole of your CSS code, it works fine - the fault is on your custom css code.
    2) Just apply the "border-radius" css tag, it will make it more rounded.
    3) Well, I do not understand - can you show me some example or explain greater?
    4) I don't think that layer slider does have this kind of functionality, but you can always add the custom class for the button and style it with CSS code.
    5) Use this CSS code:
    @media (max-width:768px){
    	.social{
    		display: none !important;
    	}
    }
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • charlipcharlip
    Hi,

    Thanks so much for your replies.

    1. I can't disable all of the custom CSS as I've got a lot in there to style the site as my client wants. Could you please let me know where this fault is that is affecting the button?
    2. Thanks I'll look into this.
    3. If you see on this screenshot https://prnt.sc/tsnkbm you can see the hamburger menu on the left. I want it to sit in the sticky header at the top and not half way down the screen on the left. 
    4. I uploaded an image for the button background instead :) 
    5. That's worked. Thank you!
  • PabloPablo
    1) Sorry, but we do not know which one is making that issue.
    You have to remove(cut) one by one to find that.

    3) How did you achieve that?
    As I see, you are using safari browser and it works fine on iphone 11
    Do you have any steps to achieve that problem?

    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • charlipcharlip
    1. Ok I'll see what might be causing it.
    3. The screenshot is from my client's phone... I think it's an iPhone 7, but it's also happening on my phone which is a Galaxy S10 in Chrome.
  • PabloPablo
    Well, I tested it on both of these devices and it looks correct, see screen:

    Can you test if the same happen when you will clear the cache of your mobile devices browser?
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • charlipcharlip
    Thanks. Solved 1 - it was adding a margin to the button css. I created a class just for the buttons I wanted the margin on instead of adding css to apply to all buttons.

    3. All fine on my end and client has said nothing more. 

    Thanks for your help :)
  • rizcodesignrizcodesign
    Hi,

    I am noticing the the buttons on the site I am working on appear normally in Google Chrome, but appear condensed with the text dropping onto two lines in Safari. Can you tell me how I can fix this?


    Thanks 
  • PhilPhil
    rizcodesign,
    Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
    It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rizcodesignrizcodesign
    edited October 2020
    Hi Phil,

    Our site is still being developed and is not yet live, but here is a link to an image of the page in Safari where the button is breaking onto a second line. Buttons in Google Chrome appear normally on one line. https://pasteboard.co/JwP6m6C.png

    Here is a link to the site in development: http://safe4athletes.wpengine.com/
  • PhilPhil
    Sorry but without a link to your website, our help is limited.
    Please, contact us again when it is online.

    Best regards
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rizcodesignrizcodesign
    Hi,

    I sent the link in my previous comment, and will include it here as well: http://safe4athletes.wpengine.com/
  • PhilPhil
    I see that you have some errors in HTML Code.

    Please, get rid of them, and check if the problem still exist.

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.