Viewing 20 posts - 1 through 20 (of 22 total)
  • Author
    Posts
  • #251485
    Jyotirmoy Dey
    Participant

    Hi, my site http://www.thesaladguy.cool . I want to resize the size of logo. But if I’m doing so, then it is creating issue with small screen size, its overlapping the silver text, and is there an option to customize mobile view? How do I disable the slider for mobile device? Thanks

    #251497
    Skandha
    Keymaster

    @jyo: Hello there,
    Go to => Appearance => Customize => Additional CSSh and add the following CSS Code.

    @media screen and (max-width: 64em) {
    	.custom-logo {
    	    max-width: 100px;
    	}
    }
    @media screen and (max-width: 568px) {
    	.custom-logo {
    	    max-width: 50px;
    	}
    }

    Let me know if this solves your issue.
    Kind Regards,
    Skandha

    #251748
    Jyotirmoy Dey
    Participant

    Thanks. It worked.

    How to make the slider more mobile friendly? The slider overshadows my logo in mobile view. Can the slider image me a little smaller?

    #251782
    Skandha
    Keymaster

    @jyo: Hello there,
    At my end the slider image seems to be showing up fine even on mobile screens. Can you attach me a screenshot of where the slider image is overlapping the logo?

    Kind Regards,
    Skandha

    #251789
    Jyotirmoy Dey
    Participant

    Also check this, the text overlaps if the length of the viewport is small. screenshot

    #251790
    Jyotirmoy Dey
    Participant
    #251888
    Jyotirmoy Dey
    Participant

    Any help here please?

    #251957
    Skandha
    Keymaster

    @jyo: Hello there,
    Please replace the above CSS Code with the following CSS Code

    @media screen and (max-width: 568px) {
    	.custom-logo {
    	    max-width: 50px;
    	}
    }
    @media screen and (min-width: 568px) {
    	.custom-logo {
    	    max-width: 100px;
    	}
    }

    This should resolve your issue on devices.
    Let me know if this works out!
    Kind Regards,
    Skandha

    #252061
    Jyotirmoy Dey
    Participant

    Well this just fixes the logo to a small 100px which I didn’t want. But the first solution works. I will use media query to replace the logo with the viewport size.

    Another area I require help is, the MENU. How do I make the pages in my menu visible outside individually instead of grouping all inside the MENU button. I want my SHOP and EXPERIENCE menu to be independently visible and not inside MENU.

    #252076
    Jyotirmoy Dey
    Participant

    Tried putting a monogram logo for smaller viewport


    @media
    screen and (max-width: 568px)
    {
    .custom-logo {
    background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png”) !important;
    max-width: 250px;
    }

    but its not working. How do I have a different logo at a different screen size?

    #252077
    Jyotirmoy Dey
    Participant

    @media screen and (max-width: 487px) {
    .custom-logo {
    background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png”) !important;
    }
    }

    pardon the above code.

    #252106
    Skandha
    Keymaster

    @jyo: Hello there,
    To make menu items visible
    Go to => Appearance => Customize => Theme Options => Menu Options => Menu Style => Select Classic and Publish.

    I am afraid it is not possible to upload two logo images for different view ports. If you really need it I suggest you to hire a customizer.

    Kind Regards,
    Skandha

    #252156
    Jyotirmoy Dey
    Participant

    I did the change to classic menu, nothing changed at all?

    #252150
    Jyotirmoy Dey
    Participant

    Why is that a limitation when i can edit my style.css?? I can add a media query to display a monogram of my logo in a smaller screen and mobiles. Can you please elaborate?

    #252216
    Skandha
    Keymaster

    @jyo: Hello there,
    If you have made any changes to the style.css file, I suggest you not to as all your changes will be lost when you update the theme to newer versions. Please use the Additional CSS section to add any CSS Codes.

    It is very difficult to add a different logo image and require lots of customization to be made. As you can see using the CSS background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png"); is not enough.

    Kind Regards,
    Skandha

    #252269
    Jyotirmoy Dey
    Participant

    That is the reason wordpress has option to create child themes! Please tell me the changes for the css as I feel having purchased the theme should give me the flexibility to change the codes. And, though a simple media query works for other themes, if there is something else required for your particular catch theme I would appreciate you telling me where the necessary changes are to be made even if you cant help me with the code itself.

    #252270
    Jyotirmoy Dey
    Participant

    Atleast guide me to the html file that contains the logo in the markup. I will handle the css part.

    #252369
    Jyotirmoy Dey
    Participant

    Awaiting your response eagerly.

    #252456
    Jyotirmoy Dey
    Participant

    Anything?

    #252481
    Skandha
    Keymaster

    @jyo: Hello there,
    Since there is only single option to add a logo in the header you will need to use CSS to use another logo of your choice. As much I would like to help you on this issue, this is beyond our support scope. So, If you really need this I suggest you to consult a professional.

    Let me know if you have any other issues.
    Kind Regards,
    Skandha

Viewing 20 posts - 1 through 20 (of 22 total)
  • You must be logged in to reply to this topic.