Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 8, 2019 at 10:00 am #1154889
    nicolasweh

    Hi guys, I was looking for in the forum for a way to have Stretch fullwidth for the content of the Masonry Gallery in the tab section, but I haven’t found any than could help me.
    What I was trying to achieve is to change from this: https://ibb.co/PtDnwj6 to this: https://ibb.co/ZzdkG0x (2nd screenshot is made by Photoshop)
    So I’m testing in https://rvarq.com/es/test/
    And it’ll be great if through some custom CSS I could have something more similar to: https://rvarq.com/en/3d-renders/
    In this last case I have the images directly in a Masonry Gallery: « Stretch fullwidth »
    I hope you can help me on this
    Thanks

    November 8, 2019 at 12:50 pm #1154967
    Victoria

    Hey nicolasweh,

    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

    
.av-layout-tab-inner .container {
  padding: 0;
  max-width: 100vw;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 8, 2019 at 3:14 pm #1155033
    nicolasweh

    Hi Victoria, worked, I had to change the Maximum Container width to 90%, the result now is quite good, thanks
    I need to ask you 2 more things. It would be possible to reduce the height of the space dedicated to the name of each Tab: https://ibb.co/mt9VFJN
    And the last one, the Load More button, is there a way to customize it? It would be better to look more like a button and not occupying the total width of the page. Thanks in advance :)

    November 13, 2019 at 3:35 am #1156252
    Ismael

    Hi,

    Thank you for the update.

    For some reason, we can’t open the context menu and inspect the site. Anyway, if you want to reduce the height of the sort buttons container, try to remove the padding or space around it using this css code.

    .av-masonry-sort {
	padding: 0 40px;
}

    To style the pagination and make it look more like a button with defined width, use this.

    .av-masonry-pagination.av-masonry-load-more {
	width: 500px;
	margin: 0 auto;
	background: red;
	color: blue;
}

    Adjust the value as necessary.

    Best regards,
    Ismael

    November 13, 2019 at 8:39 am #1156307
    nicolasweh

    Hi Isma, thanks, the LOAD MORE button works pretty well with that css code, it would be too much to ask that it will somehow remain with a circular shape?
    Sorry about not being able to inspect the site, it’s because I use a “WP Content Copy Protection & No Right Click” plugin, now is desactivated.
    Regarding the height of the Tab section, is not a av-masonry-sort, I found the way to have a Media Library with Sort Options using Tab Sections and uploading the Media with references in the name to be able to order them, that way I avoided the need to have to make a portfolio item for each image.
    So the thing is that I would like to reduce the height of the name of those Tab Sections: https://ibb.co/DbGc1xF
    Many thanks and very much appreciated the help and support that all Kriesi team continue give to me :)

    November 15, 2019 at 10:19 am #1157118
    Ismael

    Hi,

    Thank you for the update.

    The test page no longer exists, so we couldn’t inspect the element. Did you remove it? Please add it again or provide a link to the page containing the element that you want to modify. Or try to use this css code to decrease the height of the titles in the tab section.

    #top .av-section-tab-title {
	padding: 0 20px 0 20px;
	display: inline-block;
	text-decoration: none;
}

#top .av-tab-no-image .av-inner-tab-title {
	margin-bottom: 0;
        margin-top: 0;
}

#top .avia-tab-title-padding-default .av-outer-tab-title {
	padding: 0;
}

    Best regards,
    Ismael

    November 15, 2019 at 11:58 am #1157146
    nicolasweh

    Excellent! The last CSS code was it did not modify anything, so it has only been necessary:

    #top .av-section-tab-title {
padding: 0 30px 0 30px;
display: inline-block;
text-decoration: none;
}
#top .av-tab-no-image .av-inner-tab-title {
margin-bottom: 0;
margin-top: 0;
}

    Your help was greatly appreciated. just to finish putting the icing on the pasted, and in fact knowing that I’m abusing, it would be possible to make the LOAD MORE button in a circular shape for this web: https://rvarq.com/en/3d-renders/
    Thanks again and have a nice weekend!

    • This reply was modified 5 years ago by nicolasweh.
    November 16, 2019 at 12:38 am #1157369
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    November 16, 2019 at 9:12 am #1157420
    nicolasweh

    Close it please Jordan, and thanks to Ismael

    November 20, 2019 at 1:45 pm #1158468
    Victoria

    Hi nicolasweh,

    Glad we could help :)

    We are closing the thread.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Stretch fullwidth content in tab section’ is closed to new replies.