Is there a way to make the Tab of the Layout Elements aligned the left align? - Support

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

Author

Posts
August 10, 2017 at 6:43 am #836763

JRMAX85886
Participant

Dear support team,

The Tab titles of the Layout Elements in the Avia Layout Builder are placed on the center of the page by default.
Is there a way to make the Tab title aligned the left align?
And I also want to know how to expand the width of the tab title.

Regards,
Adrien Park.

August 11, 2017 at 5:19 am #837279

Rikard
Keymaster

Hey JRMAX85886,

Could you post a link to the site in question so that we can take a closer look please?

Best regards,
Rikard

August 11, 2017 at 6:04 am #837300

JRMAX85886
Participant

Dear Rikard,
Thank you for your reply.

Here is the link, but the site is still incompleted.

Homepage

I want to make the two tabs, the CheckMate for Mobile and the CheckMate for PC, that you can see on the link, aligned left.
And I also want to know how to expand the width of the tab title.

Regards,
Adrien Park.

August 12, 2017 at 7:04 am #837755
Rikard
Keymaster
Hi,

Thanks for the link. Please try the following in Quick CSS under Enfold->General Styling:
```
.av-tab-section-tab-title-container {
  text-align:left; 
}
```
Best regards,
Rikard
September 12, 2017 at 11:15 am #850949

JRMAX85886
Participant

Dear Rikard,

I want the page to be shown like the link below. Is it possible?
http://storyline360.com/_temp/tab-title.html

Best regards,
Adrien Park.

September 13, 2017 at 7:05 am #851391
Ismael
Moderator
Hi,

Please add the following css code.
```
@media only screen and (min-width: 989px) {
  /* Add your Desktop Styles here */
  .av-tab-section-tab-title-container {
    text-align: left;
    padding: 20px 50px 0 50px;
    max-width: 1130px;
    margin: 0 auto;
  }

  .av-outer-tab-title {
      display: inline-block;
  }

  .av-inner-tab-title, .av-tab-section-icon, .av-tab-arrow-container, .av-tab-section-image {
      width: auto;
      margin-right: 10px;
    }
}
```
This is going to be applied on desktop view only. It’s not possible on smaller screens.

Best regards,
Ismael
September 21, 2017 at 9:25 am #854665

JRMAX85886
Participant

Dear Ismael,

Thank you for your CSS code.
Could you let me also know how to change background-color of the active tab into gray color like the link below?
http://storyline360.com/_temp/tab-title.html

Best regards,
Adrien Park.

September 21, 2017 at 1:19 pm #854823
Ismael
Moderator
Hi,

Please use this css code to change the activate state color.
```
#top .av-section-tab-title.av-active-tab-title {
    background: gray;
    color: #ffffff;
}
```
Best regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.