logo not showing in the right place on mobile website

Home Forums Himalayas Free logo not showing in the right place on mobile website

This topic contains 12 replies, has 5 voices, and was last updated by  zongsimdata 1 month, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1344791

    shadyzzzxv
    Participant

    I know the current dimensions for the logo are only like 120 x 60 or something, however this is too small for my website. On the normal version the logo displays fine but on the mobile site it’s in the wrong place and the header is too large. Is there any code to make the logo auto-responsive on mobile so that it fits properly?

    Website is https://crowndiyhalifax.co.uk

    #1344836

    shadyzzzxv
    Participant

    I’ve managed to fix this issue. How can i delete the thread?

    #1344841

    shadyzzzxv
    Participant

    Logo

    Actually what would the css code be to get is like this? Not sure if my last post was posted so sorry if it’s a double post.

    #1344914

    shadyzzzxv
    Participant

    Basically I want it transparent and sticky, however when i make it transparent it overlaps the slider on both mobile and web but I want it to display the logo/menu above the slider, not overlapping. Hope i’ve explained it better now. I have Himalayas Pro by the way.

    #1344919

    shadyzzzxv
    Participant

    Managed to this it using this code for anyone interested:

    
    @media (max-width: 768px) {
    	.slider-wrapper {
    		margin-top: 70px;
    	}
    }
    @media (max-width: 600px) {
    	#masthead .logo {
    		width: 70%;
    	}
    }
    
    @media (min-width: 769px) {
    	.slider-wrapper {
    		margin-top: 67px;
    	}
    }
    @media (max-width: 600px) {
    	#masthead .logo {
    		width: 70%;
    	}
    }

    the only slight question i have now is how could I move my logo literally half an inch to the left on mobile site.

    #1344971

    Ashish
    Moderator

    Hi @shadyzzzxv

    You can add following code inside Appearance > Customize > Additional CSS :

    
    @media screen and (max-width: 600px)
    {
    #masthead .header-wrapper .logo {
         margin-left: -20px;
    }      
    }
    

    Regards,
    ThemeGrill Support Team.

    #1345046

    shadyzzzxv
    Participant

    Thank you sir, that fixed it. The only issue now is that there is a few pixel gap between the mobile menu and logo which you can see at the top of the image here. It just needs moving up slightly.

    #1345129

    Ashish
    Moderator

    Hi
    Replace above code with:

    @media screen and (max-width: 600px)
    {
      #masthead .header-wrapper .logo {
         margin-left: -20px;
         margin-top: -5px;
       }      
    }
    #1345134

    shadyzzzxv
    Participant

    Thank you, I’ll try try it out later.

    How can I make the paragraph in the more about us section the same font as the rest of the theme and also how do I put new paragraphs in the about us section and contact us section. I’ve tried but they’re not going onto the next line and it looks jumbled.

    #1345305

    Ashish
    Moderator

    @shadyzzzxv
    How do you like the font for about us section to be?
    To add a paragraph, please follow the step to get excerpt box on the page that you’ve selected in About widget and wrap text in HTML paragraph tag.

    I want to have full control over the Excerpt

    #1825267

    james777888666
    Participant

    You have shared a very useful information. I am a technology expert and I always appreciate these types of helps which people shares on the internet. Actually, I am looking for some writing realted help. One of my friend suggest me a website https://edubirdie.org/ which is a writing website. I want help for my son who has not so good writing skills and he always got low marks in his school writing tests. Please give me some more websites where I can get help for my child. Thanks.

    #1827580

    sehrish.lovely1983
    Participant

    Try replacing it with this code and see if it works.
    @media screen and (max-width: 600px)
    {
    #masthead .header-wrapper .logo {
    margin-left: -20px;
    margin-top: -5px;
    }
    }

    Writing codes myself for a friend’s essay site involved some real nerve racking issues as because the theme had to be switched from .net platform.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.