Okay
  Public Ticket #2353202
iPad view logo in the middle
Closed

Comments

  •  4
    Marcin started the conversation
    April 7, 2020 at 3:11pm

    Hi,

    I have a logo in the middle in desktop and mobile view. How can I center it also in all other devices like ipads?

  •  8,991
    Tahir replied
    April 8, 2020 at 11:32am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 1366px) and (min-width: 1001px) {
    #header-outer[data-format="centered-logo-between-menu"] .span_3 #logo:not(.no-image) img {
        -ms-transform: translateX(-50%) !important;
        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
    }
    header#top .col.span_3 {
        position: absolute;
        left: 50% !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  4
    Marcin replied
    April 8, 2020 at 12:49pm

    Hi Tahir,

    Many thanks. It works on small ipad but not quite for ipad pro. At least how it looks on an emulator in Safari.

    Please take a look on attached images.

  •  8,991
    Tahir replied
    April 9, 2020 at 12:19pm

    Hey Again,

    Try using this device specific media query instead of the earlier provided and check :

    Edit: The max-device-width should be 1024 and not 1366 .

    @media only screen and (min-device-width: 1000px) and (max-device-width: 1024px) {
    #header-outer[data-format="centered-logo-between-menu"] .span_3 #logo:not(.no-image) img {
        -ms-transform: translateX(-50%) !important;
        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
    }
    header#top .col.span_3 {
        position: absolute;
        left: 50% !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •   Marcin replied privately
  •  4
    Marcin replied
    April 9, 2020 at 3:20pm

    Attachments

  •  4
    Marcin replied
    April 9, 2020 at 3:24pm

    Hi, I messed up, I got different code on email and different here somehow.

    Now it works good on ipad pro large but logo is on the left on small ipad.

    I would like to have logo centered on all devices.

  •  8,991
    Tahir replied
    April 9, 2020 at 6:44pm

    Just corrected the css. Please check now after clearing your cache as its working correctly on my end in Chrome.

     Best 

    ThemeNectar Support Team 

  •  4
    Marcin replied
    April 9, 2020 at 7:10pm

    Hi, thank you Tahir,

    but the same here after cache purge on safari/chrome

  •  8,991
    Tahir replied
    April 9, 2020 at 8:45pm

    See screenshot : http://prntscr.com/rwd8i0 . Try viewing it in Incognito Mode and check . 

    Best

    ThemeNectar Support Team 

  •  8,991
    Tahir replied
    April 9, 2020 at 8:46pm

    Also see: http://prntscr.com/rwd8ty . 

    ThemeNectar Support Team 

  •  4
    Marcin replied
    April 10, 2020 at 9:16am

    Thank you Tahir!

  •  4
    Marcin replied
    April 30, 2020 at 7:42am

    Hi,

    After last update css changes to center logo on all devices do not work anymore. Could please check if this should work or need any tweeks? 

    @media only screen and (min-device-width: 1000px) and (max-device-width: 1024px) {    
#header-outer[data-format="centered-logo-between-menu"] .span_3 #logo:not(.no-image) img {        
-ms-transform: translateX(-50%) !important;        
transform: translateX(-50%) !important;       
 -webkit-transform: translateX(-50%) !important;    }    
header#top .col.span_3 {        
position: absolute;        
left: 50% !important;    }
}


  •  8,991
    Tahir replied
    April 30, 2020 at 7:34pm

    Hey Again,

    I am seeing it centered on my end in chrome right now .

    Thanks

    ThemeNectar Support Team 

  •  4
    Marcin replied
    May 1, 2020 at 8:20am

    Thanks, that is weird. On all my browsers in private mode after clearing all history and cookies still logo is to the left in mobile views. Only on desktop, on phone logo is centered.

    CSS detects device?

  •  8,991
    Tahir replied
    May 1, 2020 at 9:23am

    Can you provide a screenshot and the screen resolution you are having this issue on ?.

    Thanks 

    ThemeNectar Support Team 

  •  4
    Marcin replied
    May 1, 2020 at 9:32am

    An all resolution after swaping from desktop menu to mobile hamburger logo goes on the left

  •  8,991
    Tahir replied
    May 1, 2020 at 9:33am

    Hey Again,

    min-device-width will only work on devices or emulation mode. It wont work when resizing the Browser. 

    Thanks 

    ThemeNectar Support Team 

  •  4
    Marcin replied
    May 1, 2020 at 9:35am

    OK, thanks. And that safari emulator?

  •  8,991
    Tahir replied
    May 1, 2020 at 9:41am

    After a bit of search Safari doesnt allow "min-device-width" so change the css to "min-width" instead: https://stackoverflow.com/questions/38220485/safari-responsive-design-mode-css-media-query-device-not-applied .

    Thanks

    ThemeNectar Support Team 

  •  4
    Marcin replied
    May 1, 2020 at 11:08am

    Many thanks Tahir!

    Many thanks for new features in v12 as well!!!!