Docs

[nickohorny]

Dear support.

I have finished my site – a simple one-pager: http://www.paragonpartners.net/staging/

I have been reviewing on various devices and am very happy with desktop/laptop layout, and the responsive look on an iPhone. But when using an ipad tablet portrait some of the content looks odd. Can you please help me with some css to make it appear neater in these areas..

Services row:
– The horizontal bullets are not lining up neatly like they do on desktop?

Sectors row:
– The image on right column, is it possible to make it appear full height? as there is noticeable gap below on an ipad.

Contact row:
– The form on the right seems to be hanging over the left columns.

– The form which has fields in 2 columns, is suddenly becoming squashed and resulting in the fields collapsing under each other.

As always, your kind help is greatly appreciated.

[Paul R]

Hi,

Not sure what you would like to happen.

You can try adding this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
   .home .x-section .x-column {
         float:none;
         clear:both;
         width:100%; 
   }
}

[nickohorny]

Hi,

That fixed the contact form section, thanks for that.

The other 2 sections I just want to do the following please for ipad layouts:

Services section:
– line up the bullets in all 3 columns like they do on a desktop

https://postimg.org/image/db0hakq77/

Sectors section:
– Can the image within the right column fit the full height of it so there is noticeable gap below it?

https://postimg.org/image/s4zy7p7f1/

Or, if too much difficult, is there any other solution to the above 2?, maybe it collapses under the left columns like they all do on a mobile phone layout?

[Paul R]

Hi,

Services section:

This is a normal behavior as your content are not the same in length.

You can try adding this in your Custom > Edit Global CSS in the customizer

@media (max-width: 1209px) {
.home #services .x-feature-box-title {
    min-height: 58px;
}
}

@media (max-width: 825px) {
.home #services .x-feature-box-title {
    min-height: 87px;
}
}

@media (max-width: 910px) {
.home #services li.x-li-icon 
    word-wrap: break-word;
    padding-right: 5px;
}

Sector Section:

This is not possible as your image is trying to maintain proportions. As the width decreases the height decreases to.

Your image will look distorted if you set the height of the image the same as your section.

http://screencast.com/t/Zg2RwxtZ

Thanks

[nickohorny]

Thanks for the help! much appreciated.

Is it possible to instead just make layout look like it does if at 767px wide
https://postimg.org/image/vsoane9dt/

on the current ipad 768px screen size.
https://postimg.org/image/ylhi7f9q9/

(so basically change the current breakpoint to be higher over 768px ipad, so it will look like it does on the 767px wide view above?)

Thanking you 🙂

[Rad]

Hi there,

Hmm, I’m a bit confused. It’s already appearing as 3 columns on iPad which is greater than 768px. Or do you mean to make it 3 columns smaller than 767px?

Thanks!

[nickohorny]

On an ipad, I want the look to be as collapsed columns, so its neater… so this style: https://postimg.org/image/vsoane9dt/

Sorry If I am overly confusing this, 🙁

Thanks!

[Paul R]

In that case, please change the code that reads

@media (max-width: 979px) {
   .home .x-section .x-column {
         float:none;
         clear:both;
         width:100%; 
   }
}

with this

@media (max-width: 1024px) {
   .home .x-section .x-column {
         float:none;
         clear:both;
         width:100%; 
   }
}

Hope that helps.

[nickohorny]

Thank you, but it has not changed?

It still shows 3 columns horizontally, not collapsed vertically. Please view the site at ipad portrait: 768px wide. https://postimg.org/image/ylhi7f9q9/

Then view the site at any size below this – so say 767px wide: https://postimg.org/image/vsoane9dt/

>> This is how I wish for it to look on a standard ipad 768px wide screen.

>> Is it not a case of changing the breakpoint to be higher? say 780px? so it remains as collapsed columns on a mobile view all way up until hitting 780px, then switches to the standard desktop display.

Thank you kindly. 🙂

[Rue Nel]

Hello There,

I am another staff checking on this thread! After further investigation, I found out that you were using a marginless columns. I would recommend that you please edit your page in Cornerstone again and insert the following custom css in the settings tab, Settings > Custom CSS

@media (max-width: 979px) {
   .home .x-section .x-container.marginless-columns {
       display: block;
   }
   
   .home .x-section .x-container.marginless-columns .x-column {
       float:none;
       clear:both;
       width:100%; 
       display: block;
   }
}

Hope this helps. Please let us know how it goes.

[nickohorny]

Thanks! That works great now.

The only issue on ipad now is that the contact section is not actually adapting neatly, it looks like this:

https://postimg.org/image/hl87b6mv3/

Any ideas how I can neaten the form and left column?….If they can’t work side by side neatly, I would just rather both columns again collapse and look like this:

https://postimg.org/image/nn2fm7u31/

Thanks.

[Rad]

Hi there,

Please add this as well,

@media ( max-width: 979px ) {

.home #contact .x-column {
width: 100%;
margin-right:0;
float: none;
}

}

Hope this helps.

[nickohorny]

Perfect, thanks for the help!

[Paul R]

You’re welcome! 🙂

[Author]

Posts