Mobile version


#1

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?


#2

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


#3

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;
  }
}

#4

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


#5

@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


#6

@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.


#7

@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;
  }
}

#8

@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.


#9

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%;
}

#10

@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!


#11

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:


#12

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