Tagged: , , , , , ,

Viewing 30 posts - 1 through 30 (of 35 total)
1 2
  • Author
    Posts
  • September 5, 2015 at 8:17 pm #498716
    September 6, 2015 at 4:40 pm #498886
    Elliott

    Hi mellypenny!

    Add this to your custom CSS.

    .responsive .logo img {
  max-height: 120px !important;
}

    Cheers!
    Elliott

    September 7, 2015 at 10:23 am #499152
    mellypenny

    Thanks Elliott,

    It still makes my logo small on desktop view though. I want the logo to be at least 250px high on desktop. Any other ideas?

    September 7, 2015 at 4:11 pm #499330
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .html_header_top.html_logo_center .logo {
    left: 40%;
    -webkit-transform: translate(-30%, 0);
    -ms-transform: translate(-30%, 0);
    transform: translate(-30%, 0);
}

    Best regards,
    Yigit

    September 7, 2015 at 6:14 pm #499469
    mellypenny

    Hi Yigit,

    I added the code to my CSS but it hasn’t changed the size of the logo on mobile view still?

    September 7, 2015 at 11:27 pm #499586
    Yigit

    Hey!

    Please change the code to following one 

    @media only screen and (max-width: 767px) {
#header_main .inner-container {
    height: 150px;
}
.responsive .logo img {
    max-height: 100%;
}}

    Best regards,
    Yigit

    September 8, 2015 at 3:07 pm #499913
    mellypenny

    Hi Yigit!

    Okay i added that code and it looks like it has made the header space bigger, but logo is still the same size..

    September 9, 2015 at 8:33 am #500219
    Ismael

    Hi!

    The original logo size is a bit too big. Please resize the width down to less than 600px then upload it again.

    Best regards,
    Ismael

    September 9, 2015 at 4:39 pm #500533
    mellypenny

    Okay i scaled down the logo to 550px, and it is slightly larger on mobile, but now it looks small on desktop and not clear.. Im having no luck here! haha

    September 9, 2015 at 4:59 pm #500556
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    September 9, 2015 at 5:01 pm #500558
    mellypenny

    Hey Yigit,

    Thats totally fine. I am getting nowhere here! lol.. Would my search bar on the phone also be blocking the logo from looking bigger? I wanted it removed anyways.

    Login below

    September 10, 2015 at 3:12 pm #501068
    mellypenny

    Any news?

    September 10, 2015 at 3:29 pm #501082
    Yigit

    Hey!

    I have added custom CSS code to the top of Quick CSS field. Please review your website now :)

    Regards,
    Yigit

    September 10, 2015 at 5:54 pm #501236
    mellypenny

    YAY!! It looks amazing thankyou!

    The only thing is the cart and menu are hanging down over the slider now on my mobile – I have an iphone 6 plus. I’m not sure if you can see it on yours?

    Also now on desktop the the ajax menu search button has dropped down as well..

    Thanks!

    September 11, 2015 at 2:45 pm #501661
    Andy

    Hey!

    on the URL you have provided here, I can’t see any cart or menu hanging down over any slider. Can you show us what you mean please? a specific URL would help.

    Cheers!
    Andy

    September 13, 2015 at 11:58 am #502285
    mellypenny

    Hi Again!

    Sorry for the slow response, i was trying to figure out a way to show you. Ive uploaded pictures of what i see on my phone and PC.. Please see below for links..

    September 14, 2015 at 3:53 pm #502857
    Elliott

    Hey!

    I don’t see the slider when I view your homepage. If you have removed it then add it back in so we can check to see what’s happening. Or if it’s on another page then send us a link to the exact page.

    Regards,
    Elliott

    September 15, 2015 at 6:14 pm #503587
    mellypenny

    Hey Guys!

    Okay well my developer decided to update enfold today, so now the mobile logo has gone back to being small :-(

    I have added the slider back in, can you please take another look and see what you think? The CSS for it all is in the child theme style.css at the bottom..

    Also can you please let me know how the loading time is on your mobile device. Mine is SOOO slow to load, which it never used to be. Also the menu doesnt seem to work. Would love someone elses opinion on this’!

    September 16, 2015 at 10:54 am #503913
    Andy

    Hi!

    use this code for your mobile menu: 

    a#advanced_menu_toggle {
top: 40px;
}

    and for your cart button:

    ul.cart_dropdown {
top: 40px !important;
}

    Loading time seems totally fine to me.

    Regards,
    Andy

    September 16, 2015 at 8:23 pm #504371
    mellypenny

    Still no luck sorry! The logo has gone back to being small on the mobile view. :-(
    At the moment i have this –
    /* TRYING TO GET MOBILE LOGO BIGGER! */

    a#advanced_menu_toggle {
    top: 40px;
    }
    ul.cart_dropdown {
    top: 40px !important;
    }
    @media only screen and (max-width: 767px) {
    #header_main .inner-container {
    height: 200px;
    }
    .responsive .logo img {
    max-height: 100%;
    }}
    #advanced_menu_toggle,.responsive #top .cart_dropdown {
    top: 100%;
    }

    Anyone have any other ideas?

    September 17, 2015 at 12:24 pm #504698
    Andy

    Hi!

    what do you mean with being small? it has normal size for me.

    Your cart button looks fine to me now and for your mobile menu use an !important too. Use this code instead:

    @media only screen and (max-width: 767px) {
a#advanced_menu_toggle {
top: 40px !important;
}
ul.cart_dropdown {
top: 40px !important;
}}

    With this both mobile menu and cart button should be in a better position for mobile version.

    Hope this helps.

    Best regards,
    Andy

    September 17, 2015 at 1:20 pm #504737
    mellypenny

    Hey Andy!

    I guess i kinda wanted my logo to fill the top of the screen, like it does on PC view. Is there any chance of that? Then have the menu & cart button underneath? Or like underneath to the side?

    I see there is also some space to the left, can we move it over that way a bit to make it bigger?

    Have added your code in and everything lines up fine now, just hoping to get it to fill the screen :-)

    Many Thanks for your time and patience. :-)

    September 17, 2015 at 1:35 pm #504749
    Andy

    Hi!

    what do you mean with fill in the screen? quite difficult to imagine what you want. Can you provide us a mockup of what you want to achieve please? you can use imgur.com or dropbox.

    Regards,
    Andy

    September 17, 2015 at 1:51 pm #504773
    mellypenny

    Hey Andy!

    Sorry im not good at explaining :-) I did a quick mockup and have uploaded it to my site. Link is below. Let me know if this is achievable?

    Thanks!

    September 17, 2015 at 2:33 pm #504802
    Andy

    Hi!

    thanks for the mockup. Replace my code from above with this one:

    @media only screen and (max-width: 767px) {
a#advanced_menu_toggle {
top: 114px !important;
right: 45px !important;
background-color: white !important;
border-color: white !important;
}
a#advanced_menu_toggle:before {
color: black;
}
ul.cart_dropdown {
top: 114px !important;
right: 94px !important;
}
div#full_slider_1 {
margin-top: 40px;
}}

    Try to play around with the values until it fits to you.

    Cheers!
    Andy

    September 18, 2015 at 2:08 am #505187
    mellypenny

    Hey Andy,

    Thanks i have added your code and got the cart & Menu where they need to be, but for the life of me i cannot get this logo to be any bigger!! Its still just small at the top and wont fill the space i have made.

    This is what i have now.

    /* TRYING TO GET MOBILE LOGO BIGGER! */

    a#advanced_menu_toggle {
    top: 40px;
    }
    ul.cart_dropdown {
    top: 40px !important;
    }

    @media only screen and (max-width: 767px) {
    #header_main .inner-container {
    height: 180px;
    }
    .responsive .logo img {
    height: 180px;
    }}
    #advanced_menu_toggle,.responsive #top .cart_dropdown {
    top: 100%;
    }

    @media only screen and (max-width: 767px) {
    a#advanced_menu_toggle {
    top: 154px !important;
    right: 30px !important;
    background-color: white !important;
    border-color: white !important;
    }
    a#advanced_menu_toggle:before {
    color: black;
    }
    ul.cart_dropdown {
    top: 157px !important;
    right: 90px !important;
    }}

    September 18, 2015 at 1:40 pm #505473
    Andy

    Hey!

    use this code:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
height: 160px !important;
max-height: 160px;
width: 330px;
max-width: 330px;
}}

    and adjust as needed.

    Cheers!
    Andy

    September 19, 2015 at 2:07 am #505816
    mellypenny

    Hey Andy!!

    Thankyou, thankyou!!! It worked!!

    The only thing i worry about it if the logo will now scale with the size of a screen? So if the screen is smaller or bigger will the logo scale, or stay the same size?

    Thanks so much once again!!

    September 21, 2015 at 6:37 am #506225
    Ismael

    Hi!

    The code above will only affect the the mobile view or screens with resolution lower than 767px.

    Best regards,
    Ismael

    September 22, 2015 at 6:38 pm #507287
    mellypenny

    Thanks so much for that!! It looks amazing now :-)

    Just another quick one while we are on the subject of mobile view.. Does anyone know how to remove this dotted line under my product pictures in mobile view? It doesnt show on desktop, only mobile.

    Many Thanks in Advance..

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 35 total)
1 2
  • The topic ‘Mobile logo size – Make it bigger!’ is closed to new replies.