Increase section size on mobile and remove extra white space on mobile - Support

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
June 14, 2016 at 3:00 am #647731

navindesigns
Participant

Om my site, i have a section an intro section below the slider which I made one large graphic with BCCP on the left and a paragraph text on the right. The reason for making this a graphic is because when I tried using html text the BCCP and text on the right never aligned properly. Anyways, the one large graphic looks good on desktop but on mobile it is really small and there are tons of extra space on the top and bottom.
1. Anyway to make it larger on mobile?
2- How do I remove the extra space at the top and bottom of that section

screenshot – http://postimg.org/image/w337g6rbb/

June 14, 2016 at 5:29 pm #648159

Yigit
Keymaster

Hey navindesigns!

1- It would be the best if you placed two 1/2 column elements in your color section and insert image on the left and text on the right. You can apply the changes and then let us know so we can help with alignment.
2- Please edit your color section element and choose to display no padding.

Cheers!
Yigit

June 15, 2016 at 4:51 am #648358

navindesigns
Participant

I tried it but it is not appearing the same way. Please see block directly below it

Homepage

My client concern is that he wants it to appear SAME on all desktop screen sizes. So if you resize your browser, please look at the one above (static image), how it stays consistent compare to the one I just created below.

June 16, 2016 at 4:44 pm #649314
Yigit
Keymaster
Hi,

Please edit your color section element and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then add following code to Quick CSS in Enfold theme options under General Styling tab
```
#your-custom-id p { margin: 0!important; line-height: 40px; }
@media only screen and (min-width: 767px) {
#your-unique-id .av_one_half:nth-child(1) {
    margin-left: 0!important;
}
#your-unique-id .av_one_half {
    margin-left: 1%!important;
    width: 49%!important;
}}
```
Best regards,
Yigit
June 16, 2016 at 4:49 pm #649321

navindesigns
Participant

Updated.
Its close but need a little bit more work to make it look exackly like the one above
– i think the width is too wide
– also on smaller screen, look whats happens (screnshot – https://postimg.org/image/x2yiso507/)

June 17, 2016 at 5:48 pm #649910

navindesigns
Participant

any update?

thanks as always

June 20, 2016 at 4:17 am #650564

Ismael
Moderator

Hi,

What if you only display the “columns” on mobile view and the “graphic” on desktop? Toggle their display with css media queries. http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

Best regards,
Ismael

June 20, 2016 at 4:18 am #650565

navindesigns
Participant

yes that would work. can you provide me the css for that?

June 20, 2016 at 5:37 pm #650962

Yigit
Keymaster

Hey!

Please refer to the post Ismael linked here – https://kriesi.at/support/topic/increase-section-size-on-mobile-and-remove-extra-white-space-on-mobile/#post-650564

Cheers!
Yigit

June 25, 2016 at 4:40 pm #653370

navindesigns
Participant

Thanks. That worked!
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Increase section size on mobile and remove extra white space on mobile’ is closed to new replies.