Mobile version front page: menu & logo on header / vertically centered text

Hi Vlad,

first of all: Thank you for the up till now fantastically working mobile version of Sydney Pro. However, after the last update I have two really big problems with the frontpage of the mobile version:

  1. How can I move the menu back in front of the header picture (transparent background?) (as it always was before?). How can I do this?

  2. Even more important: I need the header text vertically centered in the middle of the header picture (as it always was before) – NOT at the bottom. How do I change this?

Please help me asap, the once beautiful mobile startpage I had looks not really nice anymore … 

Here my page: http://islablanca.es/en/welcome

Thanks so much in advance!!!

Cheers from Barcelona!
Marcel

Hi,

Well, the way it is now solves a lot of problems for people with a lot of text.
Anyway, use a custom CSS plugin and add this in it please:


@media only screen and (max-width: 991px) {
      .site-header.fixed {
          position: absolute !important;
      }
}
@media only screen and (max-width: 767px) {
      .text-slider-section {
         min-height: 190px;
      }
}

Hi Vlad,

thanks a lot for your recommendation. I was installing “Simple Custom CSS” and inserting your text. The situation with the vertically centered text has improved – I was testing it on several iOS and Android devices. However, the header picture is now cut off on the top although I was setting back the menu color to default. How can I set the menu to “transparent mode” in the mobile frontpage, as it was in all previous versions? I don’t get it … My frontpage looks on a iPhone 6 Plus like this now:

iPhone 6 Plus frontpage

dropbox link:

On an Android tablet the frontpage looks like this now (besides the cut off top of the picture, the text is also not vertically centered):

Android/Fire Tablet

dropbox link:

I would appreciate a lot, if you can have another look into this (for me very important) topic!

Thanks so much in advance!!!

Cheers, Marcel

Don’t know why, the links don’t show … here they come again …

  1. iOS: https://www.dropbox.com/s/lje0489asdnp9ah/IMG_3229.PNG?dl=0

  2. Android/Fire: https://www.dropbox.com/s/7e6x7h69m24k6r2/IMG_3230.JPG?dl=0

Sorry, add this too:


@media only screen and (max-width: 991px)
  .site-header {
       background-color: transparent;
  }
}

Hi Vlad,

thank you very much, with the additional code, the portrait mode looks fine now :slight_smile: … just in the code after …“991px)” a “{” was missing, but I got it :slight_smile:

Anyway, this is not why I have to bother you again, I am having trouble now in making the landscape mode look nice …

On a Android/Fire OS Tablet the landscape looks like this:

What can I do that the frontpage photo doesn’t get cut off on the top, but instead at the bottom? And how can I fix that the slider headline doesn’t overlap with the logo?

On an iPhone 6 Plus everything looks fine:

Can I set the iPhone look as a kind of general look for the mobile theme, maybe?

Your help, as always, would be very appreciated! Thanks!

Cheers
Marcel

I’m just going to quote myself from earlier in this thread.

Well, the way it is now solves a lot of problems for people with a lot of text.
That's why we moved it outside the header, so we don't run into this sort of overlapping issues :)

Try this out:


@media only screen and (max-width: 991px) {
     .text-slider-section {
         top: 60%;
     }
     .text-slider .maintitle {
         font-size: 34px;
     }
}

Ok, Vlad, thank you, got it! I can live then with some overlapping in a few cases and your code above helped to improve the overall situation … BUT even WITHOUT any custom CSS code in landscape mode always the top of my frontpage photo is cut off, see here:

How can I tell the theme to cut off the BOTTOM PART, NOT the top?

Hope you can help me with this final issue, so I don’t have to bother any further (for the moment) :slight_smile:

THANKS!!!

This would do it:


@media only screen and (max-width: 1024px) {
     .slides-container .slide-item {
          background-position: top center !important;
     }
}

Thanks a lot, Vlad! With your help I have implemented the following custom CSS code that fixes the overlapping issues in most cases and the cut off of the frontpage photo’s top in ALL cases! I am happy again with the look of my mobile frontpage! Thanks for the perfect support! :slight_smile: Here the code for others which may have the same problems that I had:

@media only screen and (max-width: 991px){
.site-header {
background-color: transparent;
}
}
@media only screen and (max-width: 991px) {
.site-header.fixed {
position: absolute !important;
}
}
@media only screen and (max-width: 991px) {
.text-slider-section {
top: 60%;
}
.text-slider .maintitle {
font-size: 34px;
}
}

SORRY COPY PASTE MISTAKE (LAST PART OF CODE WAS MISSING).

Here the final working version: :slight_smile:

@media only screen and (max-width: 991px){
.site-header {
background-color: transparent;
}
}
@media only screen and (max-width: 991px) {
.site-header.fixed {
position: absolute !important;
}
}
@media only screen and (max-width: 991px) {
.text-slider-section {
top: 60%;
}
.text-slider .maintitle {
font-size: 34px;
}
}
@media only screen and (max-width: 1024px) {
.slides-container .slide-item {
background-position: top center !important;
}
}

Tks friend