Mobile version

I’m a new user of Moesia Pro with my website When i watch upon my website on Iphone it doesn’t look very well.

How can i fix that?

I’m also having issues with my mobile website with Moesia. My problem is that the row backgrounds don’t resize like the header background. I can even test it immediately resizing my window on my computer and when it gets small enough the rows split and don’t minimize, however the header does.

I found the java script under rows.php though I don’t know how to edit it. Any help would be appreciated.

Thanks,

Adam

Hello…

@Ronald can you be more specific? I dont get what is your issue

@Adam can you please to add the css code below on your child theme or using custom css plugin? and let me know if it can fix your issue

@media screen and (max-width: 1024px){
  .panel-row-style {
    background-size: 100% 100% !important;
  }
}

@Awan When you open my website (sollicipuur.nl) on a phone en you watch it in protrait it doesn’t look well.

@Ronald Okay, just checking your site and I think your issue is about the padding (space in left-right). To decrease those space, you can use these css code below:

@media only screen and (max-width: 320px){
  .hentry .post-content, .single .hentry, .page .hentry {
    padding: 30px 5px;
  }

  .widget .container, section .container {
    padding-left: 0;
    padding-right: 0;
  }
}

you can put the code above using custom css plugin.
And let me know if your issue is not what I am talking about in above because I don’t know what exactly you mean with “doesn’t look well”

cheers

@Awan Thanks for the code, I put it at the bottom of my stylesheet css but it didn’t seem to work. I think the code should work, but maybe it’s in the wrong place? The other issue is that when I have two joined rows with the same background, they look good on a big screen but they become split on a small screen, I’m not sure if your code would help this issue as well. Thanks again for the help.

@Adam how is you change the code in above with this? also, can you please to remove background image and background color for the services widgets?

@media screen and (max-width: 1024px){
  #pg-37-0 .panel-row-style {
    background-size: cover !important;
  }
}

@media only screen and (max-width: 720px){
  #pgc-37-0-0 .panel-widget-style {
    height: auto !important;
    background-size: cover;
  }
}

@Awan: I’m having the same problem with my website http://www.ishqmatters.com/

It works fine on my computer but not on my phone. Can you please take a look? Thank you.

Hi @rhklm

looks like you add this css to your site?

main#main.site-main {
    width: 1120px;
}

please remove those code and change with this:

#primary {
    width: 100%;
}

@Awan: thank you for the quick reply! I tried the code you gave me. The header and footer are ok now but the table is very squished and distorted. How can I fix that?

Thank you!

Hi,

The HTML table tag are not supported for responsive design.
You need an advance custom code to make it responsive, as example you can see the tutorial here https://css-tricks.com/responsive-data-tables/

You can hire developer to work with this or just ask codeable to help you :slight_smile:

@Awan: Thank you very much for your help! I fixed the problem.