How can i have the same structure?

Dear buddies,

I have the last question about my website: I have turned off the responsive web design but some parts of the pages (especially the texts and maps) when you see it with the mobile phone don’t appear as well as on the computer. I don’t know if you understand me… I mean, it is more or less the same as on the computer but the texts and the maps tend to change a little bit the shape and the thing is that i want to have it as you can see on the computer screen. I mean, I want to reduce everything in the same proportion so that it has the same structure.

Best regards

Kevin E.

Hello there,

Could you please post your URL here so I can have a closer look?

Regards,
Kharis

Hello Kharis,

The URL is: www.egeabuildings.thednscluster.com

I am meaning the section of “Promociones” and “Contacto”. Both section change a little bit.

Thanks for your attention.

Kevin E.

Hello there,

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

#ngg-gallery-546-355 .ngg-gallery-thumbnail{
  max-width: 100%;
}

@media only screen and (max-width: 1199px){
  .form9 .wdform_column {
   max-width: 50%;
  }  
}

@media only screen and (max-width: 991px){
  .container {
   width: 90%;
  }
}

Let me know how it goes.

Regards,
Kharis

Hello Kharis,

I have tried what you told me but it doesn’t work. Probably it is my fault because i don’t know how to explain it well. The thing is that depends on the type of screen in which you see the website (PC, tablet or mobile phone) it changes its structure (texts become more narrow and long, maps fill more space than when you see them with the PC, the plugin for the contact section changes the structure as well, etc.). And as you know i had turned off responsive website design because i wanted the same structure for everything but it changes a little.
I don’t know if i can solve it but i would like to do it. If you want i can send some pictures to you to see the difference.

Regards

Kevin E.

Hello there,

Could you please try to apply the following CSS code?

@media only screen and (max-width: 1200px){
  .container{
    width: 1170px !important;
  }
}

That code will completely turn off the responsiveness. Please refer here.

Let me know how it works for you.

Regards,
Kharis

Hello Kharis,

The website is almost perfect! And everything is thanks to your help. There is only one more thing that it is not in the same position. It is the Contact section and i think it is likely to be because it has been done with a plugin, am i right?
In the contact section (when you see the website with the mobile phone) the map appears below the gaps to fill with the information.

Thanks for your help

Best regards,

Kevin E.

Hello Kevin,

Try to apply the following CSS code:

.wdform_page .wdform_section > div{
  max-width: 50% !important;
}

Let me know how it goes.

Warmest regards,
Kharis

Hello Kharis,

It works perfectly! Thanks for your help!

Best regards,

Kevin E.

Hello there,

Thank you for updating. I am glad to know that it works.

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

Regards,
Kharis