Centre logo in header for mobile only view - Support | Kriesi.at

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

Author

Posts

March 26, 2014 at 4:41 pm #243420

Hi guys, is anyone able to point me in the right direction; I’d like to centre the logo in the header but only in views below 1024px wide. I am using an off canvas menu for mobile so the logo looks a little odd floating left in this view: http://boadev.co.uk/

Any advise appreciated.

March 27, 2014 at 5:10 am #243658

Yigit

Keymaster

Hey britorthopaedic!

Please add following code to Quick CSS in Enfold theme options under Styling tab

@media only screen and (max-width: 989px) {
.responsive .mobile_slide_out .logo {
position: relative;
left: 35%;
}}

Best regards,
Yigit

March 27, 2014 at 10:53 am #243756

britorthopaedic

Participant

Hi Yigit

Thanks for your great response, got me going in exactly the right direction. The CSS I’ve got so far, which seems to be working nicely on most devices (although slightly off on iPhone 4 in Landscape) is:

/* Centre Logo for mobile  ----------- */

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.responsive .mobile_slide_out .logo {
position: relative;
left: 37%;
}}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.responsive .mobile_slide_out .logo {
position: relative;
left: 32%;
}}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 481px) {
.responsive .mobile_slide_out .logo {
position: relative;
left: 30%;
}}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 480px) {
.responsive .mobile_slide_out .logo {
position: relative;
left: 18%;
}}

Thanks again :)

Author

Posts

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

The topic ‘Centre logo in header for mobile only view’ is closed to new replies.