Create space between two columns for destop and mobile friendly versions - Support

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

Author

Posts
August 28, 2014 at 2:29 pm #310416

Soapmarine
Participant

Dear team,

I’d love to have two columns on the page, but also have some space that separates them. It looks good on the desktop when I use left-padding: 120px; please see: http://imgur.com/lMpbdET but on the mobile it looks bad, as the second column instead of going under the first column is sliding slightly to the side, please see: http://imgur.com/VSe7XIN,J49s3GZ#0

I tried to create 3 columns (1/3, 1/3, 1/3) but it leaves me with huge space between two columns, it doesnt look good.

Could you please advice me?

Here is the page I’m referring to: http://soapmarine.com/boccamoka/coffee-and-tea/

Thank you!
Alfiya

August 28, 2014 at 3:28 pm #310469
Yigit
Keymaster
Hi Soapmarine!

Please firstly turn on Custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your text block elements with extra space a custom CSS class and then add following code to Quick CSS
```
@media only screen and (max-width: 768px) {
.your-custom-class * { padding-left: 0!important; }}
```
Best regards,
Yigit
August 28, 2014 at 10:01 pm #310668

Soapmarine
Participant

Hi Yigit!

thank you for you help!
Just to make sure I understand how to use correctly your awesome features….

In the Custom Css class I created the new class for the text block:

Than in the Quick CSS tab I assigned the features for this class:
.your-custom-class {
padding-left: 120px;
text-align: left;}

And as well I added your code for the media screen:

@media only screen and (max-width: 768px) {
.your-custom-class { padding-left: 0!important; }}

Is this what how I should use your instructions?

Thank you!
Alfiya

August 28, 2014 at 11:18 pm #310702

Yigit
Keymaster

Hi!

Please add the class to element without the dot. So it should be “your-custom-class” (without double quotes)

Cheers!
Yigit

August 29, 2014 at 11:08 am #310855

Soapmarine
Participant

Dear Ygit,

I’m very sorry, I used your extra class:

and assigned the padding-left: 120px;

But the space doesnt appear.

Could you please advice?

Thank you very much!
Alfiya

August 29, 2014 at 12:41 pm #310879

Yigit
Keymaster

Hey!

I checked “Drinks” page on your live site and it does work on my end – http://i.imgur.com/Eeptkgf.png
Please flush browser cache

Regards,
Yigit

August 29, 2014 at 1:25 pm #310910

Soapmarine
Participant

Dear Yigit,

we had a misunderstanding here. I removed the padding-left that was inline in the text of the second column, and the column goes correctly under on the mobile. But by removing this inline padding I dont have enough space between two columns. Please see:

That is why I tried to use your extra css function, I just wanted to know if I use it correctly.

Thank you!
Alfiya

September 1, 2014 at 4:46 pm #311916
Dude
Participant
Hey!

No, I checked the screenshot: http://i.imgur.com/5OhWZnO.png and you must replace:
```
.your-custom-class
```
with:
```
your-custom-class
```
The custom class field does not require the class selector ( . ) because it just supports classes and no other selector like element ids, etc.

Regards,
Peter
September 2, 2014 at 12:30 pm #312240
Soapmarine
Participant
Dear team,

I did use the code:
```
your-custom-class
```
but it did not help? Any advice please?
Thank you!
Alfiya
September 3, 2014 at 7:31 am #312677
Ismael
Moderator
Hi!

Thank you for the update.

There is no custom css class on the text block with the “SOFT DRINKS” title. Please add it as described here: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Add this on Quick CSS or custom.css:
```
@media only screen and (max-width: 767px) {
.your-custom-class > * {
padding-left: 0 !important;
}
}
```
Regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.