Mobile view is off


#1

Hello, I’m hoping someone can help me. My mobile view of website is not what it should be. It does a strange cut of my main image and it doesn’t see to be mobile-optimized. Is there a trick to this? My link is here.

thank you


#2

Dear Marta,

Thank you for asking.

In order to achieve that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin?

@media only screen and (max-width: 900px){
  #pg-43-0 > .panel-row-style{
    height: 500px;
  }
}

@media only screen and (max-width: 600px){
  #pg-43-0 > .panel-row-style{
    height: 250px;
  }
}

@media only screen and (max-width: 400px){
  #pg-43-0 > .panel-row-style{
    height: 180px;
  }
}

#pg-43-0 > .panel-row-style{
  background-position: top center !important;
  background-size: 100% !important;
}

You might need to adjust the height values accordingly.

Let me know how it works for you. I’ll wait to hear back from you.

Warmest regards,
Kharis


#3

Oh that is much better, thank you so much Kharis! If I wanted to play around with the height values, what does each line represent?


#4

Actually now that I look at it again, the main text from the main image on my home page is still off. On my cell phone it doesn’t show at all and on my table it’s cut off. Is there an additional code for that?

thanks again


#5

Hello there,

Could you please try to add the following CSS code?

@media only screen and (max-width: 966px){
  
  #pgc-43-0-0 .textwidget h5,
  #pgc-43-0-0 .textwidget h3{
    padding-left: 0 !important;
  }  
  
   #pgc-43-0-0 .textwidget p span{
     display: none !important;
   }
  
   #pg-43-0 > .panel-row-style{
     position: relative;
   }
  
   #pgc-43-0-0 .textwidget{
     max-width: 60%;
     padding-right: 5px;
     float: right;
   }  
  
}

@media only screen and (max-width: 740px){
  
  #pgc-43-0-0 .textwidget h5,
  #pgc-43-0-0 .textwidget h3{
    font-size: 20px !important;
    line-height: 20px;
    margin-bottom: 15px;
  }    
  
}  

@media only screen and (max-width: 600px){
       
   #pgc-43-0-0{
     position: absolute;
     right: 0;
     bottom: 0;
     width: 100%;
     display: block;
   }
  
   #pgc-43-0-0 .textwidget{
     max-width: 100%;
   }   
     
}  

Let me know how it works for you. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#6

Hi Kharis,
It’s almost right. Can you tell me which code refers to the main image and the main text so I can play around with the numbers to get it right?
Thank you

Marta


#7

Dear Marta,

I would like to apologize in advance for delayed respond.

Main image

#pg-43-0 > .panel-row-style{
  /* your code goes here */
}

Main text

#pgc-43-0-0 .textwidget{
  /* your code goes here */
}   
#pgc-43-0-0 .textwidget p span{
  /* your code goes here */

}
#pgc-43-0-0 .textwidget h5,
#pgc-43-0-0 .textwidget h3{
  /* your code goes here */
}

Warmest regards,
Kharis


#8

Thank you kindly Kharis :slight_smile:


#9

I’m sorry to keep bugging you, I thought I could figure out the rest on my own but I can’t :(. How can I change the height on my main image on mobile?

Thank you so much for your help!


#10

Dear Marta,

Try the following.

@media only screen and (max-width: 600px){
  #pg-43-0 > .panel-row-style{
    height: 500px;
  }  
}

Warmest regards,
Kharis


#11

Great, thank you!!


#12

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here? We would highly appreciate it if you do so.

Warmest regards,
Kharis


#13

I’ve already given it the highest rating :)))


#14

Thanks a million. That’s very mean for us.

Have a nice day!

Warmest Regards,
Kharis