[Resolved] Responsive Leadpage

[Christoph]

Hi, hello,

I have created with sections a leadpage: http://www.antesdelas6.com/eres-un-visionario/

On a desktop PC it looks good. But on mobile/smartphone not.

Any tipps to make it better … perfect ?

[Leo]

Hi there,

The content in the first section with the two columns is not responsive as it has set height and width to them:

#ebooktext {
    width: 505px;
    height: 900px;
    background-color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

How are you inserting them?

[Christoph]

This code is added with SIMPLE CSS at this specific page. No I tried with % like this:

.box {
     float: left;
     width: 45%;
     margin-right: 5%;
     padding: 20px;
     background: #eee;
     box-sizing: border-box;
}

Desktop PC ok, but reponsive nothing …

[Leo]

Columns should be created using one of these methods: https://docs.generatepress.com/article/creating-columns/

[Christoph]

I LOVE “Using built-in unsemantic grid”, thats easy and cool … GeneratePress rocks … thanks for help :-X

[Leo]

No problem 🙂

[Christoph]

Hi, hello,

I am once again with the columns: At the homepage we want 2 images, once next to the other and with the same height, but I can do it:

Homepage: http://www.antesdelas6.com

Should be like this (or with a small padding between)

[Leo]

Can you try using 65 and 35?

[Christoph]

Ok, 65/35 works, but the height is the same ?

[Leo]

Unfortunately you cannot control the height using this grid system.

You can either crop the picture so they are the same height, or Google equal height columns to use Flexbox.

[Christoph]

The left pic is 552 x 315 px
The right pic is 276 x 315 px

They has the same height, that’s why I was surprise about how its shown …

[Leo]

The picture were too big to start with (552 x 315 px) so it is automatically scaled down to 416 x 237 px.

Your overall container width is only 670px so you’d have to play with the numbers some more.

[Author]

Posts