Hi Mike
I totally agree – I always put my code in here to help others, and look at as many posts as possible to find the answer before I bother you :)
I realised that I did have a slightly different js that didn’t work from another post but it was from a while ago, so yours is perfect! Thanks about the modal check box – it is actually checked but I like the js option on each page in case I need to target portfolio items in a different way, ie, not in a blank loader. Thank you! :)

Thanks, Mike but it’s still jumping and the text is not stacked vertically. I targeted just this page, so added in the code, below. I want it to appear like this –

STUDIO
1 BD
2 BD
2 BD + DEN
3 BD

Thanks again!

/* older plans page to stack titles */

.page-id-197 #av-tab-section-1 .av-inner-tab-title,
.page-id-197 #av-tab-section-1 .av-tab-section-icon,
.page-id-197 #av-tab-section-1 .av-tab-arrow-container,
.page-id-197 #av-tab-section-1 .av-tab-section-image {
width: 80px !important;
}

.page-id-197 #av-tab-section-1 .av-tab-section-tab-title-container {
padding-left: 25px !important;
padding-right: 0px !important;
}

.page-id-197 #av-tab-section-1 .av-section-tab-title {
font-size: 10px !important;
}

Perfect! Thanks so much :)

Hi Vinay
That didn’t work because it didn’t target it but I looked around and figured it out. I wrapped my select in a div called select-container and then applied it to the div, et voila! Thank you! My code is here for others :)

/* wrap each select in a div for the fontello icon arrow */

.select-container {
position: relative;
}

/* use fontello icon for pulldown arrow *******************/

.select-container::before {
z-index:9999!important;
font-family: ‘entypo-fontello’;
content:’\e877′!important;
color: #000;
padding: 12px 8px;
position: absolute;
right: 0;
top: 0;
background: transparent !important;
text-align: center;
line-height: 12px; /* adjust vertical positioning */
width: 30px;
height: 100%;
pointer-events: none;
}

That worked really well! I had made a color section and placed a logo inside but the key was to target the widget so if I need to edit it I don’t have to change very instance on every page . Some code, below, to help others :) Thanks, Vinay!

/* color section with unique id and widget inside */
#logoHeaderWide .widget {
margin: 0px 0px 0px 0px !important;
background-color: #000 !important;
}

/* logo in widget */
.horizontalLogo {
width: 100% !important;
height: auto !important;
padding: 10px 0px 0px 0px !important;
}

Hi again
I noticed that this css –

.template-page.content.av-content-full.alpha.units {
/* padding-top: 0px!important;
padding-bottom: 0px!important; */
}

Was effecting all sections on the page so I need to target just the first one with the horizontal logo under the header, and I need to also make that widget background black, please. Thanks again!

Ok, thanks, Nikko!

Here you go –

https://snag.gy/LMQCHf.jpg

thanks! :)

No, all is well – please close this thread :)

It’s ok, I figured it out – it’s this, thanks! :)

.av-subheading_below p {
/* put styles here */
}

Ok, I wondered about that.
I still need to know how to target the text to style subheading for modern centered with my own css, please :)

Ok, super! That worked nicely for the default special heading if you target the specific element, thank you!

Also, part two of my question was –
I’d also like the modern centered example to have the same text width only border as the default, plus how do I target the sub heading to style it, please?

Sorry for the delayed reply. It’s still not working for me after clearing cache and looking on other browsers, etc.
Here’s a screenshot before scrolling, where you can see that the sub menu is in the correct place on hover but the top menu items seem to be pushed up under the secondary menu –

And here’s one after scrolling starts, where everything is in the proper place –

Hi again

Sorry to be a pest – I know about those settings. The problem is on my page I want all three columns to be –

– equal width
– the same white space between left border, right border and columns, eg 50px –
50px – 1/3 col – 50px – 1/3 col – 50px – 1/3 col – 50px

In the first row I adjusted the 2nd column to have 50px left and right and of course it made the column narrower and not as tall.

In the second row (the plans) they are default and equal height and width but as you see 100px between the middle col and the 1st and last.

Again, it seems that some css applied to the cols to adjust width and left-margin makes the most sense but I can’t get that to work.

Something like this –

#top .av_one_third.small-padding-columns{
margin-left: 1%;
width: 32%;
}

From this post?

https://kriesi.at/support/topic/how-can-i-set-grid-layout-of-images-on-home-page/

Hi Victoria

Yes, that is clear, as suggested by Rikard, and without adjusting the margin-left as well it’s not addressing my issue. Again, referring to my page in the private area, I simply want to have a vertical space between the middle column and the first and last, eg 10px or 20px (currently in orange, just for testing), with all three columns equal in width AND height. The rows are set to have no margin, align top, equal height.

I f you look at the page’s center column, which has a class assigned to it called ‘.plan2’ it’s doing something to the height – in the first row there is what looks like a 20px white space at the bottom, and in the second row the button also looks about 20 px higher, even though the content is identical (see the following screenshots).

Row 1

Row 2

I looked at a lot of other posts and the resolution appears to be a combination of a width slightly less than 33.3% plus a width of 2% for the margin-left except for the first column. I tried that but it didn’t work, but does seem like the best option.

Thanks again; I hope we can resolve this soon :)