Services section layout in mobile phones

Hello,
Thank you guys for this great theme.
I have two question regarding my moesia site.
Site:
Www.Goodirection.Co.Il

  1. Service section - mobile view / layout: why is it that on mobile phones the “Services” section looks different from the way it looks on my computer? On mobile it appears as one column (service under service under service etc.) while computer shows 3 services per line. I really dont like this mobile layout, and I would like to change it so it will look normal (like is looks on computer).

  2. Font awesome not working: other computers (when I am not logged in) shows empty squares instead of my “fa” fonts. Plus, on mobile phones i’m getting chinese symbols. How can I fix this?

Appreciate your help,
Roi.

Dear Roi,

Thank you for getting in touch here.

> 1

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width:991px){
  
  .services-area .service.col-md-4.col-sm-6.col-xs-6{
    width: 32% !important;
  }
  
}

> 2

To fix this issue, please refer here.

Regards,
Kharis

Hi kharis.
Thanks for helping me. But…

I have entered your code into “My custom css” ( I 'm guessing it’s like “Simple custom css”). Unfortunately it made the mobile layout even worse. Instead of fixing the service section it actually changed the testimonial section to also appear in one column.

Any idea?

Forgive me, I was wrong.

The code is good (I used online emulators). I forgot I have an lg-e410f phone (240-320 px, super small).

Will you please be so kind and provide me with the codes for:

  • testimonial section - to appear in 2 columns (2 per line)
  • facts section - 4 columns (4 facts in one line…)
  • recent posts section / blog - 3 column ( 3 per line)
  • how do write more codes? Code under code?

I am trying to make my site look the same in all devices.

Thank you,
roi.

Dear Roi,

> I am trying to make my site look the same in all devices.

Try to turn off the site’s responsiveness by doing the following instead of adjusting each section one by one.

  1. Open the header.php file, then remove the following line:
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. Open the style.css file, then remove all of the code which reside after the following line:
/* Media Queries
-------------------------------------------------------------- */
  1. Apply the following CSS code through the Simple Custom CSS plugin
.container{
   width: 1170px !important; 
}

Regards,
Kharis

Hi kharis,
Thank you so much for your help.

  1. So… Does that means my site won’t be responsive? isn’t it bad? i actually want it to stay responsive…
  2. I did ctrl+f on style.Css and did not found “Media queries”. But there is “Media”.
    So, I deleted the code between “Media” and “Caption” (there is a lot more coming after “Media”. “Caption” is the one under media).

Here is the code I deleted (am I right?):

/--------------------------------------------------------------
Media
--------------------------------------------------------------
/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}

i didnt delete the header of course:

/--------------------------------------------------------------
Media
--------------------------------------------------------------
/

so…
i’m bit frustrated.

follow your recommendation but it doesn’t work.
emulators shows a very messy, unreadable, mobile site.
but… that first code that you gave me is actually nice. maybe we should focus on that and add some more codes to “my custom css”?

thank’s again.

Dear Roi,

I would like to apologize in advance for inconvenience.

Try the following CSS code:

@media only screen and (max-width:767px){
  .testimonials-area .testimonial.col-md-6.col-sm-6{
    width: 50% !important;
    float: left !important;
  }  
  .facts-area .col-md-3.col-sm-3.col-xs-6{
    width: 25% !important;
  }  
} 


@media only screen and (max-width:991px){
  .latest-news-area .blog-post.col-md-4.col-sm-6.col-xs-6{
    width: 33.33333333% !important; 
    clear: none !important;
  }
}

Let me know how it goes.

> how do write more codes? Code under code?

I can’t catch this objective clearly. Could you please elaborate it?

Regards,
Kharis

Hi Kharis,
Thank you for fast response!

Simply add this code to “my custom css”?
Should i also adit/change something in the main code (code editor)?

  • "how do write more codes? Code under code?"
    I mean in “my custom css” - for example, if i already have one code added, how do i enter another one? under the first one?

Roi.

Okay, code entered.

So, I would like to test my site on different mobiles (iphone, samsung etc.). The problem is that every mobile website test site (simulators) gives me different resoults, from some unknown reason.

Perhaps you can recommend on some reliable testing site?

I use this one:
Http://mobilewebtest.Eu/galaxys3

For example, this test gives different results:
Http://mobiletest.Me/samsung_galaxy_y_emulator

Any suggestions?

Thank you in advanced,
Roi.

Dear Roi,

Apologies, both devices have different viewport width. It is actually really hard making the grid always looks the same on any device. Apologies, nothing I can do further. What I can recommend is, turning off the responsiveness like this guy did.

Regards,
Kharis

Thank you so much man.

Hello! I’ve tried with the CSS up so the mobile version of my site can show two columns of services instead of one but it didn’t work. Maybe I applied the wrong code? Can you help me? I’m using Sydney

Hello there,

Please try this code:


@media only screen and (max-width:991px) {
  
  .widget_sydney_services_type_a .service.col-md-4 {
    width: 50%;
    float: left;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Yes, it worked but I want to do it also in all of the following pages:
http://terapiaansiedad.com
http://terapiaansiedad.com/jovenes
http://terapiaansiedad.com/adultos
http://mobiliariocomercialamedida.com
http://mobiliariocomercialamedida.com/farmacia
http://mobiliariocomercialamedida.com/mostradores

Hello there,

Please share the link to the page where the code works perfectly on, so I can check and compare to find the solution.

Regards,
Kharis

Now is working in all these pages:
http://terapiaansiedad.com
http://terapiaansiedad.com/jovenes
http://terapiaansiedad.com/adultos

But not working with
http://mobiliariocomercialamedida.com
http://mobiliariocomercialamedida.com/farmacia
http://mobiliariocomercialamedida.com/mostradores

Also in this lasts pages, I changed the color of the call-to-action buttons but on the mobile version is yellow instead of blue… i don’t know why

Thanks!

Hello there,

You mentioned two different sites that have separate admin panels. Have you properly applied the code in mobiliariocomercialamedida.com? It looks like mobiliariocomercialamedida.com is being cached. Please flush cache from cache plugin setting, and reload those pages. Let me know how it goes.

Regards,
Kharis

Yes, it worked! thanks :slight_smile: