Keep Classic Image Size the Same (on Changing from 6 to 5 Column Format)

Support
#1

Dear Support.

From Cornerstone Templates (Starter: Sales Page) I am using part of the template (the x6 Classic Images / Thumbnail) in a 1/6 column format @ 150px x150px) all ok.

Question

I wish to have x1 of the same Classic Image / Thumbnail’s:

1.) Placed CENTRALLY and KEEP THE SAME SIZE

If I build a 5 column format (to get the Central) it make the Classic Image too Large?

If you use the below link you can see on scrolling to the bottom of the page.

Many Thanks,

Simon

http://dipa.com.au/?cs-launch=1&cs_route=content.builder/13696

Permalink: http://dipa.com.au/?page_id=13696

#2

Hey @Good_Usernames_Gone,

For this case, you will need to either use fixed width images like in this video. If you can set it to 82px, that would be the best size to use because that is the smallest width a column could shrink to and the image spans the width of the column if the column is has a smaller width than the image.

If that is confusing, you can try the alternative in this video. Add this code the Image Element CSS

@media (min-width:768px) {
  $el {
    width: 13.33332%;
  } 
}
#3

Thank you for your response , but I am struggling.

The first Fix you sent me I am unable to use, as I am using CLASSIC Image (not an image) and the controls are all different.

Will the second CSS Fix work? (I am trying this, but having no effect on CLASSIC Image)?

Thank you again and I look forward to your response…

#4

Hi There,

Thanks for writing in again!

Can you please post your login details in a secure note so that we can have a look.

Thanks

#6

Hi @Good_Usernames_Gone,

The CSS should be almost similar as @christian_y provided. But using class name since it’s a classic element. Example, please add this to your global custom CSS (not image element CSS)

@media (min-width:768px) {
  .thirteen_percent_width {
    width: 13.33332%;
  } 
}

Then simply add thirteen_percent_width to your classic image’s Class input field.

Thanks!

#7

Hi Rad and thank you for your reply.

The CSS fix DID NOT WORK after I copy and pasted what you sent me through into Global CSS? (Might be an idea making sure this was entered correctly)

The thirteen_percent_width to your classic image’s Class input field DID WORK.

You have my log in details already and if you don’t mind can you please LOG IN > DASHBOARD > ALL PAGES > **** Rad’s Question (I have set up a TEST PAGE with a few other notes for us) you will see the this Fix has not been resolved.

Thank you again Rad for your help and I look forward to hearing back from you.

Simon

#8

Hi Simon,

Upon checking your global css, I can see a lot of css code syntax error (missing close brackets) and unnecessary text. I went ahead and fix it.

With regards to image size, please change the css code to this

@media (min-width:768px) {
    .thirteen_percent_width .x-column {    
        width: 13.33332%;    
        display:inline-block;    
        float:none;
   }
}

Then add the class thirteen_percent_width in the class field of your ROW element where the images resides.

Hope that helps

#9

Dear Paul,

Thank you for your latest and this is now ‘almost’ resolved.

If you go back to DASHBOARD > ALL PAGES > **** Rad’s Question (First Page and TEST Page) you will notice the sizing issue has been FIXED, but NOT on the x2 smaller views as requested and the white border keeps Stretching Left to Right.

I have been inserting the:

@media (min-width:768px) {
.thirteen_percent_width .x-column {
width: 13.33332%;
display:inline-block;
float:none;
}
}

fix into the ROW CSS, due to the Global CSS NOT appearing to alter any aspect of tyhe Classic Images? (I have this currently entered into both Global AND Row CSS section, the Global as I believe this is your instruction, the Row CSS as it’s the one that works)

Sorry to bug you guys again about this fix… :frowning:

Simon

#10

Hey Simon,

I’m sorry but we have not taken into account the variation of image width. I’ve said in the first reply, the image will span the width of the column if the image width is greater than the current column size and the image will expand to its actual size when the column width is greater than the image’s width.

That is what’s happening in your page.

For your case, it’s actually best to follow the fixed image width solution. It’s also the simplest solution. See https://youtu.be/ciJWyom0whU. This is the first solution I recommended and I actually realized that it would be hard to use percentage width and it’s also tricky as the code we’ve suggested only replicates the 6 column layout.

The code in that video is:

a.x-img {
    display: inline-block;
    width: 120px;
}

The code also eliminates the border stretching problem.

If you’re using 6 columns, you will need to reduce 120px. It’s also best that you use this on a page by page basis only so you add this in your page’s Content > CSS. Or much better, apply a specific class to your row to target images in it specifically. The selector then would be like your-row-class a.x-img

Thanks.

#11

Many Many Many Thanks to you and the rest of the team at Apex. I have finally got my head around this all and I couldn’t have done without all your help!

Cheers,

Simon

#12

You’re welcome, Simon. Glad we could help.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.