Alignment of image/meta, css for field content only and hiding ACF field name

  • Resolved ecdj

    (@ecdj)


    4 years, 11 months ago

    Hi,

    I’ve been using your plugin for several years now for several projects.
    At the moment I’m struggling with some customization, maybe you could help:

    1) When using a right alignment of image and left alignment of meta, there’s a lot of white space on the right site of the image (probably as I’m not using the info space, but I already disabled that). Is there anyway the meta could be aligned next to the image?

    2) Is there a way to target only the field values with custom CSS (make them appear as bold text), while keeping the field labels just the same. I’ve only found a way to make both bold.

    3) I’m using ACF to show some custom fields; I would like to hide the field name of one of the fields; there is a css code for that but that doesn’t seem to work in combination with your plugin, any idea what could work to just only hide: Eventbrite: ?

    4) When using the customization you gave for a simple event list here: https://www.ads-software.com/support/topic/a-very-very-simple-list/ I get a very weird alignment issue, where some events show everything without unnecessary spacing, and some do (Nieuwjaarsborrel), (see: https://genius.nl/home-test/ ) any idea why this happens?

    Thanks so much in advance!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Guido

    (@guido07111975)

    Hi,

    1) The width of the featured image is max 40% of the content area. You can change that by using some CSS at the custom CSS page of the Customizer:

    
.vsel-content .vsel-image {max-width:40%;}

    (change the width to your needs)

    2) To make the values bold, you can target the span tag:

    
.vsel-meta span {font-weight:bold;}

    3) Try this:

    .acf-field-name {display:none;}

    4) The alignment issue is caused by the height of the event title (the H3). Change your CSS a little:

    
.agenda .vsel-meta-title {clear:none; float:left; margin:0 20px 10px 0 !important; line-height:normal;}
.agenda .vsel-meta p {margin: 0 20px 10px 0 !important; display:inline-block; line-height:normal;}

    Guido

    Thread Starter ecdj

    (@ecdj)

    Thanks for your quick help.

    1) I actually like the size of the image, is there a way to get the meta info right aligned next to the image without enlarging the image?

    2).vsel-meta span didn’t work, but .vsel-content span did, thanks!

    3) That hides all the field names, I just want to hide the ‘Eventbrite’ field name.

    4) That doesn’t seem to help; I still have this weird white space (see screenshot)
    https://www.ernstdejong.nl/genius.png

    Plugin Author Guido

    (@guido07111975)

    Hi,

    1) You have to change the two main elements:

    
.page-id-1325 .vsel-image-info-left {width:60%;}
.page-id-1325 .vsel-meta-right {width:36%;}

    Have added the ID of that page, so it only applies there. Change both widths to your needs.

    3) Try this:

    
.vsel-meta-acf-eventbrite .acf-field-name {display:none;}

    4) Remove the line-height:normal; from .agenda .vsel-meta p and try again.

    Guido

    Thread Starter ecdj

    (@ecdj)

    O, only just saw that you already have responded!

    3 and 4 are perfect now.
    Only just can’t get number 1 like I want.

    .page-id-1325 .vsel-image-info-left {width:50%;}
    .page-id-1325 .vsel-meta-right {width:75%;}

    places the meta on the spot I want it to be, and keeps the images the size I want them to be, but it just seems to push the image down (doesn’t stay on the left side of the meta). Already tried:

    .page-id-1325 .vsel-image-info-left {position:relative}
    .page-id-1325 .vsel-image-info-left img {position: absolute; top:0px; left:0px;}

    But that doesn’t work.

    Plugin Author Guido

    (@guido07111975)

    Hi,

    
.page-id-1325 .vsel-image-info-left {width:50%;}
.page-id-1325 .vsel-meta-right {width:75%;}

    The total should be 100% or less. Now it’s 125%.

    Guido

    Thread Starter ecdj

    (@ecdj)

    Yes I already was thinking that, but if I did that there was still a big space between the image and the meta text. But I fixed that with:

    .page-id-345 .vsel-content .vsel-image-left {
    max-width:90%;
    }

    Thanks for your help! This is solved now!

    Plugin Author Guido

    (@guido07111975)

    Hi,

    Both should not be more than 100%, so if you want to increase one you should decrease the other one. And leave some space between both, looks better.

    Example:

    
.page-id-1325 .vsel-image-info-left {width:20%;}
.page-id-1325 .vsel-meta-right {width:75%;}

    In this example 5% space between both elements.

    Oh, and in this case you don’t have to use the max-width.

    Guido

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Alignment of image/meta, css for field content only and hiding ACF field name’ is closed to new replies.