optimze the spacing of the ajax portfolio grid and the portfolio preview images - Support

Viewing 30 posts - 1 through 30 (of 31 total)

1 2 →

Author

Posts
February 28, 2018 at 4:47 pm #919163

fkm
Participant

Hi.

I´d like to change the spacing of the text inside the ajax portfolio grid (I already removed the box-shadow) to make it look similar to text above (no space at the left, reducing space at the top/bottom of the items to simulate the same line-height etc.) – for big screens and mobile devices.

Also I´d like to increase the width (100%) of the ajax portfolio preview images and the text below at mobile devices (I changed the preview from slider to list).

Please let me know the codes (quick css) for this – if possible.

Thanks a lot in advance.

Best regards, FKM

March 1, 2018 at 7:47 am #919433

Rikard
Keymaster

Hey FKMZ2,

I’m not sure I understand what you are looking to change, do you want to align the text to the left? If you have a screenshot or mockup highlighting the changes it would likely help us understand better what you are looking to achieve.

Best regards,
Rikard

March 1, 2018 at 10:20 am #919507

fkm
Participant

Hi, Rikard.

Thanx a lot for your immediate reply.

Alright – I´ll show you by images.

Best regards, FKM

March 1, 2018 at 2:33 pm #919658

Rikard
Keymaster

Hi,

Thanks for the feedback. You can upload images to a service like Dropbox, Google Drive, Imgur etc. and then link to them here.

Best regards,
Rikard

March 1, 2018 at 6:52 pm #919802

fkm
Participant

Hi,

thx for the information.

Best regards, FKM

March 2, 2018 at 12:12 pm #920267
Ismael
Moderator
Hi,

Thank you for the update.

Please use this code in the Quick CSS field.
```
.responsive .portfolio-details-inner {
    padding-top: 20px;
}

.responsive .ajax_slide .av_table_col {
    display: block;
    padding: 0 30px 30px 30px;
}

.responsive .portfolio-preview-title {
    margin-bottom: 30px;
}
```
You can also use the Separator/Whitespace element to create more space between the texts.

Best regards,
Ismael
March 2, 2018 at 1:35 pm #920318

fkm
Participant

Hi, Ismael.

Thank you very much – a lot is done with that.

Still I need to know how to controll the spacing inside the cells of the jax portfolio preview grid (pllease see “portfolio-grid.jpg).
And how to increse the width at the mobile view (please see “mobile-1.jpg” and “mobile-2.jpg”).

Hope you can help me.
Thx in advance.

Best regards, FKM

March 3, 2018 at 9:44 am #920711
Victoria
Inactive Moderator
Hi FKM,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  .responsive .ajax_slide .av_table_col {
    padding: 10px;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
March 5, 2018 at 11:09 am #921408

fkm
Participant

Hi, Victoria.

thank you very much for your reply.

I put it into “Quick CSS” and after I add “!important” to it, it worked – great!

So at last please let me know how to control the padding/margins of the ajax portfolio preview grid (please see “portfolio-grid.jpg”)

Thx in advance.

Best regards, FKM

March 5, 2018 at 9:10 pm #921792

Basilis
Inactive Moderator

Hi,

Can you please disabel your cache so we can be able to see the images and make sure that it looks right and it does not brake properly?
We would really need that so the code is right.
Probably the code is

.grid-entry .inner-entry { padding:10px; }

but would be perfect if it would look best.

Best regards,
Basilis

March 6, 2018 at 10:36 am #922126

fkm
Participant

Hi, Basilis.

Thank you very much for your immediate reply.

I´m (a wordpress amateur) not sure what you mean exactly or rather I don´t know how to disable my cache.
I would be very thankful for any advice.

Btw: unfortunately the code you gave me doesn´t work in that case.

Thx in advance.

Best regards, FKM

March 6, 2018 at 11:06 am #922142

Victoria
Inactive Moderator

Hi FKMZ2,

Do you have any caching plugins enabled? Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

Best regards,
Victoria

March 6, 2018 at 11:21 am #922157

fkm
Participant

Hi, Victoria,

Thx for the very fast reply.

I don´t have any caching plugin enabled – at least I think so (if I have one, it´s unaware).

Best regards, FKM

March 6, 2018 at 2:28 pm #922306

Victoria
Inactive Moderator

Hi,

Best regards,
Victoria

March 6, 2018 at 6:42 pm #922460

fkm
Participant

Hi,

it looks the same on my end – pretty nice!

But actually that´s not what I meant.
I´m sorry – maybe I expressed myself in a misleading way.

I´d like to change the “grid-entry/inner-entry” of the ajax portfolio preview grid/table (like Basilis wrote before) and also would like to increase its width at the mobile view to 100% (just like the content above).

Looking forward to your reply.

Best regards, FKM

March 7, 2018 at 11:22 am #922853

Victoria
Inactive Moderator

Hi FKMZ2,

Do you have a screenshot of what it looked like or what it is supposed to look like?

Best regards,
Victoria

March 8, 2018 at 4:40 pm #923941

fkm
Participant

Hi, Victoria.

Alright, thx.
And thank you for your patience.

Best regards, FKM

March 11, 2018 at 9:14 am #925180
Ismael
Moderator
Hi!

Thank you for the info. Please add this code in the Quick CSS field.
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
	.grid-entry .inner-entry {
		box-shadow: none;
	}
}
```
Best regards,
Ismael
March 12, 2018 at 3:52 pm #925565

fkm
Participant

Hi, Ismael.

Thank you for your reply – most of it is done.

Still I have no idea for the right code to increase the portfolio-grid at mobile view (please see “mobile.jpg”).

Beside that I would be very thankful for any advice, how to remove the grid-shadow and the little triangle at the Ajax portfolio preview (please see “box-shadow.jpg”).

Thank you very much in advance.

Best regards, FKM

March 15, 2018 at 4:34 am #926993
Ismael
Moderator
Hi,

Still I have no idea for the right code to increase the portfolio-grid at mobile view (please see “mobile.jpg”).

1.) Please look for this css code or modification.
```
.responsive #top #wrap_all .av-flex-cells .no_margin {
    padding-left: 16px!important;
    padding-right: 16px!important;
}
```
Below, add this one.
```
.responsive #top #wrap_all .grid-entry.no_margin {
    padding-left: 0 !important;
}
```
Beside that I would be very thankful for any advice, how to remove the grid-shadow and the little triangle at the Ajax portfolio preview (please see “box-shadow.jpg”).

2.) For that, these css codes should work.
```
div .portfolio-preview-image {
    border-right: 0;
}

div .portfolio-preview-content .avia-arrow {
    display: none !important;
}
```
Best regards,
Ismael
March 19, 2018 at 4:34 pm #929131

fkm
Participant

Hi, Ismael.

Thank you so much – it worked.

Could you please still tell me how to remove the horizontal lines/borders at the ajax portfolio preview as well as the box shadow and the hover effect at the navigation (Please see the link below).

Thank you very much in advance.

Best regards, FKM

March 20, 2018 at 7:05 am #929539
Victoria
Inactive Moderator
Hi FKMZ2,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  .main_color .ajax_controlls a:hover {
    background-color: #fff;
    color: #3a3a3a;
    border-color: #dddddd;
  }
  #top .portolio-preview-list-image {
    border-bottom: none;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
March 20, 2018 at 10:24 am #929667

fkm
Participant

Hi, Victoria.

thank you so much – it worked immediately.

Could you please tell me now, how to control the colors of the ajax portfolio navigation (color/background-color/border-color) for the general (non-hover) situation?

And – if it´s possible easily and not to much to ask – how to build a gap (e.g. 10px) under every single image at the ajax portfolio preview?

Thx in advance.

Best regards, FKM

March 21, 2018 at 5:34 am #930291
Victoria
Inactive Moderator
Hi FKM,

You can just change the values in this code:
```
  .main_color .ajax_controlls a {
    background-color: #fff;
    color: #3a3a3a;
    border-color: #dddddd;
  }
```
It has the color, background and border color.

This code will give your images the 10px margin around it:
```
#top .portolio-preview-list-image {
    margin: 10px;
  }
```
If you need further assistance please let us know.
Best regards,
Victoria
March 21, 2018 at 10:30 am #930467

fkm
Participant

Hi, Victoria.

Thx for your immediate reply that leaded to a succesful result – great!

I just discovered there´s still one last line at the bottom of the ajax portfolio preview image list you can see at the mobile view (Pls see the link below).
Could you please give me an advice how to remove that one?

Thx in advance.

Best regards, FKM

March 22, 2018 at 12:55 pm #931221
Victoria
Inactive Moderator
Hi FKM,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  .responsive #top .portfolio-preview-content {
    border: none;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
March 22, 2018 at 3:22 pm #931372

fkm
Participant

Hi, Victoria.

Worked – great.

Thank you and the team for your exemplary support.

Keep it up!

Best regards, FKM

March 23, 2018 at 6:24 am #931776

Victoria
Inactive Moderator

Hi FKM,

Glad we finally got it working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria

March 28, 2018 at 10:21 am #934087

fkm
Participant

Hi, esteemed Kriesi.at-Team.

It´s me again and I got a small concern:
I´d like to know how to move the ajax portfolio preview controls and text to the upper border (Pls see the link below).
Would be very thankful for your support.

Thx in advance.

Best regards, FKM

March 28, 2018 at 10:25 am #934090

fkm
Participant

I forgot:
Just for bigger screens and unchanged at mobile devices like smartphones.

Thank you.
Author

Posts

Viewing 30 posts - 1 through 30 (of 31 total)

1 2 →

The topic ‘optimze the spacing of the ajax portfolio grid and the portfolio preview images’ is closed to new replies.