Change Collections detail pages to match alignment with Artists detail pages?

[user24 230]

Hi, if it’s technically possible just with CSS, I’d like to change the alignment of the main sections on the Collections detail pages to exactly match the alignment of the main sections on the Music Artists detail pages when in full window landscape view. (Just at the top of the pages, not all the way down through every vertical section.) Here is a current comparison to show the differences – Artists page top LHS, with the same Collection page to the right and below:

The larger round Artists image is a nice size now because it is the same height as the heading+overview block of info at the right. The smaller square Collections image appears to be the main cause of the misalignment? Therefore, I suppose the Collections image would first need enlarging to match the size of the Artists image. (I don’t need the shape to change from square to round – it can stay as square.) I’m guessing that just doing this may be enough to move everything else to the right to where it needs to be? But it may also push everything below down too far?

I also noticed that, when changing from full window view to full screen view, The Collections page image stays the same size BUT the Artists page image increases in size and again messes up the overall alignment so it’s not consistent across the UI. Examples below – first Collection comparison, followed by Artist comparison. Full window view top LHS, with 2 full screen comparisons to the right and below:

A bonus would be if the Artists image could stay the same size, when changing views, like the Collections image does.

Therefore the four views would then all be consistent across the UI:

• Artists detail full window
• Collections detail full window
• Artists detail full screen
• Collections detail full screen

Any suggestions, advice or information would be most helpful! Thanks.

(P.S. - with any of the above, I'm not fussed if any changes mess up Movies or TV pages in any way).

[visproduction 233]

My Custom CSS code changes these pages.  The alignment is pretty close.  The width of the main poster of the artist or collection,  will still push the logo and play buttons automatically.  These auto changes make the page work for various browser window sizes to match different hardware or if the user has a smaller floating window.  If you lock everything down to precise alignments, the page will break for many users that use mobile, tablets, or smaller notebooks.  You don't design a web page to fit a magazine page or print design.  Web pages have to be more flexible, or many people will just see broken pages that are cut off or rows that break.  Using precise alignment that does not flex with the screen size will just make the entire site look broken and no one visits such web pages.  

Scroll to the bottom of the custom theme post to get the latest version.  The code for changing these pages are probably about 60 style adjustments and 6 different exceptions for smaller browsers, TV, tablets and mobile.  The entire custom code is currently at 3333 lines no optimized.

 

[Luke 39306]

They are already the same. The only difference is the size of the image.

[user24 230]

On 2/1/2025 at 2:40 AM, Luke said:

They are already the same. The only difference is the size of the image.

@Luke  Thanks for confirming what I sort of expected. As a test, I tried hiding the main image altogether, using this code:

.detailImageContainer {

  display: none;

}

Then, without the image, everything else aligns perfectly between Artist and Collection pages:

I also discovered that, while there is the image size difference in the Web App, there seems to be no size difference using the Android App on a TV. Ideally, I would still like to achieve the same main image size across Artist and Collections pages in the Web App.

@visproduction  thanks for the extra (technical) info. Yes, I understand and agree with what you are saying about sizing and alignment. I guess what I am after is not so much an exact fixed image size compared to the other page elements, but rather the exact same consistent size between the Artist and Collection pages (similar to the Android App.)

Thanks for sharing your custom CSS. I always like to see what others are doing, and the end result, but you are WAY more knowledgeable about this than me!!! You are inspiring me to learn more…  but I haven't advanced any further as yet (not giving up though)...

I guess I would need to change the ImageContainer size (fixed or responsive) and then scale the image inside to fit???  (BTW – I only care about the music pages in the Web App because I use the Android App for Movies and TV, so no great bother if other non-music web pages are adversely affected.)

Any help is always appreciated. Cheers!

[Luke 39306]

I guess you will have to give detailImageContainer an assigned width, like for example:

width: 20vw!important;

But of course that's going to affect all detail screens and may not look good with some things.

[user24 230]

@Luke Thanks for the extra tip, and sending me in the right direction, as I expect you are super-busy with so many things, along with trying to help everyone. Yeah, without using !important the width can’t be adjusted, which is what I was previously finding and getting stuck on.

20vw seems to work to a limited extent – I'm finding that values up to 14vw (or 163px) adjusts the image size equivalently for the Collection / Playlist / Album Artist / Artist / Composer pages and gives pixel-perfect alignment between the top section common elements on the pages.

Values above 14vw (or 163px) continue to increase the Album Artist / Artist / Composer image size, but the Collection / Playlist image remains fixed at 14vw (163px) thus throwing the alignment out again.

Therefore, there must be some other underlying differences between the pages causing the size restriction???

The 14vw size is not too bad at all though. Using this and moving the image down to be centered with the Play Button works quite well:

.detailImageContainer {

  width: 14vw !important;

  margin-top: 28px;

}

This achieves an absolutely seamless transition with navigating between Artist and Collection pages, helping greatly for my larger music library project. (I’ll aim to post more about this elsewhere, when it’s a bit more evolved…)

It would be nice to potentially use image sizes between 14vw and 20vw – but it’s not a showstopper!

Yeah, some other pages are also affected – but again, not a showstopper!

Thanks again for your help!

[user24 230]

On 2/15/2025 at 10:20 AM, user24 said:

Therefore, there must be some other underlying differences between the pages causing the size restriction???

On 2/15/2025 at 10:20 AM, user24 said:

It would be nice to potentially use image sizes between 14vw and 20vw

Having another look at this... if the Maximum Width of the Container is specifically set, then this overrides (I think) the Collections default maximum size and allows for an increased primary image size on all relevant pages:

/* ALIGN TOP SECTIONS OF COLLECTION AND ARTIST PAGES*/
.detailImageContainer {
  max-width: 25% !important;
  width: 16vw !important;
  margin-top: 17px; 
}

I don't know if this is the technically correct best method or not, but it works for what I was originally wanting to achieve. I haven't found any negative effects, as yet. All values can be adjusted (absolute or relative) to get the desired result.