Several interesting template "SteakHouse" improvements

Use the "Steakhouse" template and attempt to know and master to use it on my clients website. My URL is:
http://www.new.qualitaweb.es
where they can see all the questions that I want to do. I attached a number of issues of vital importance for the correct use of the template. Appreciate solution to the following questions:
(1) While in a modulo two columns defined as
<Div class = "gkCols" data-cols = "2">
<Div> column1 </ div>
<Div> column2 </ div>
</ Div>
(Eg "Si buscas diferenciarte y destacar-Estás en el lugar adecuado"), when we go to the mobile version image of column2 not resized correctly, is it possible that the image is resized so that it looks good on mobile ?



(2) The intro of the web (the home page) correctly in the PC version, but to pass the mobile version, a "white areas" are created between the different blocks of the intro. How can you remove?


(3) Under the assumption that the web has a width of 1170px, if we create a module and we put blocks of text, we see that the text occupies the entire width of the web (see the option "La web de tu boda"). However, if you create an article, and assign it to a menu option, to see it on the web, only occupies a width of 880px (see the option "rediseño web"). Because you can not see over all size of the web? Where size with the items when they are defined?

PROBLEMA 1.
La solución al primero de los problemas planteados, la redimensión de la imagen, se obtiene la añadir a la etiqueta de la imagen el código:

Code: Select all

style="display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto;"

Aun quedan dos problemas sin resolver. Agradeceria ayuda.

Hi

Looks like first problem is solved. Hee is a piece of code to add to override.css to fix the second one:

Code: Select all

@media only screen and (max-width:640px) {
#gkBottom1, #gkBottom2, #gkBottom3, #gkBottom4, #gkBottom5, #gkBottom6 {
    padding: 0;
}

#gkTop1 .box, #gkTop2 .box, #gkSidebar .box, #gkMainbody .box, #gkBottom1 .box, #gkBottom2 .box, #gkBottom3 .box, #gkBottom4 .box, #gkBottom5 .box {
    clear: both !important;
    float: none !important;
    margin: 0 !important;
}
}


Hello,
The previous code perfectly solves the second problem, however, creates a problem that was previously in the case of tablet 7 ".
The following image presents as you could see before adding the code (which removes the white stripes). As
you can see, everything is focused



After adding the code, it is so



You can enter the site, and see for myself. Appreciate a solution. Again, thank you very much for his trouble.

Hi

please change the margin value in my code from:

Code: Select all

margin: 0 !important;

to

Code: Select all

margin: 0 auto !important;

Thank you so much for your trouble answering. The number 2 fully solved problem. Now is perfect.

Hi

Glad I could help Closing this thread now.