How to put large images on the home page together ....

HI,

Please go to : http://www.corridapelomeubairro.com/

How to put large images on the home page together ....

In front on the main page of the site.,,, Down ... I'm trying to put large images that cover the entire screen, like the slide background image at the top of the page ...
  How do I do this? I tried this code but to no avail?

<style>
.img{
max-width:100%;
height:auto;

.post-content{
max-width:700px;
}
.post-content img{
max-width:100%;
}

</style>
<div id="meio">
<div><img src="images/image_1.jpg" width="1679" height="868"></div>
<div><img src="images/image_3.jpg" width="1679" height="868"></div>
<div><img src="images/image_4.jpg" width="1679" height="868"></div>
</div>

Could help me do stay the way I put the cod?
Regard´s
GUILHERME BORGES
027 3055 0137

I would like the images become centralized and that there were no space between them ... stay one under the other line. and the footer to stay also no space between them.

hello?

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

.frontpage #gkPageContent .gkPage {
max-width: none;
}


if I understood correctly this should help.

That's it right there .. .You's the guy !!!!!!!!!!!!!!!!!!!!
Thank you for everything ... even you are always ready and willing to help as well. I am very grateful for your time and for your talent. Thank you !

I noticed that now everything is in the right place ... But the images are not responsive ...
How can I do so that they are also responsives?

I ´m use this cod in page :
{source}

<style>
#meio figure{
background-position: left;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
width: 1720px;
height: 896px; /* aqui você pode colocar a altura que quiser */
}
</style>
<div id="meio">
<figure style="background-image: url(images/image_1.jpg)" /></figure>
<figure style="background-image: url(images/image_3.jpg)" /></figure>
<figure style="background-image: url(images/image_4.jpg)" /></figure>
</div>

{/source}

and css/override.css

.frontpage #gkPageContent .gkPage {
max-width: 100%;
}

what issus ?

Hi

I agree it's because of this code:

Code: Select all

#meio figure {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 894px;
    margin: 0;
    padding: 0;
    width: 1720px;
}

I think the style is placed in custom html module there. Am I right ? Try change this code with:

Code: Select all

#meio figure {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 894px;
    margin: 0;
    padding: 0;
    max-width: 1720px;
}

@media only screen and (max-width:1200px) {
#meio figure {
    height: 600px;
}
}

@media only screen and (max-width:900px) {
#meio figure {
    height: 450px;
}
}

@media only screen and (max-width:600px) {
#meio figure {
    height: 300px;
}
}

@media only screen and (max-width:400px) {
#meio figure {
    height: 200px;
}
}


of course values in responsive part of code may need to be adjusted or some widths may need to be added.

When I wrote the cód the page was blank.

no.. no...

I've forgotten to put a tag ... Yes .. I worked but ... I only put
some values like you said! Yeah ... right ... very good! Thank you again and again. Thank you very much !

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro

Hi friend,

Yes for sure ... just one thing I decreases in some broswer
sizes we can not know how the User will behave and images
They were not 100% but were left with a white frame on both sides ...

See if this happens to you also in [... Try reducing the broswer to a size of normal ... see what happened.

How to speak well of support ... Sure ... you guys are great !!!

I point out to everyone. Very good service! The guys are beasts!

Hi

There is a small padding added in small.desktop.css file so text would not touch browser edges, but You may try to add this code at the end of it:

Code: Select all

.gkPage {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


Also in mobile.css You may want to add this code:

Code: Select all

#gkTop1 .box, #gkTop2 .box, #gkSidebar .box, #gkMainbody .box, #gkBottom1 .box, #gkBottom2 .box, #gkBottom3 .box, #gkBottom4 .box, #gkBottom5 .box {
    max-width: none;
}