Dynamic buttons and banner in rich content editor

[designhelp]

I’m trying to build a homepage for a course without using tables and I’m having trouble getting the banner and buttons to line up. For reference it's a banner with 4 thin buttons beneath it… I need everything to span the entire page and line up both when accessed by clicking “pages” and when accessed by clicking “home”. What is happening is I can get everything the way it’s supposed to be for one and not the other. 

Here is the page when accessed by clicking “Home” (screenshot 1 - everything looks correct), and here is the page when accessed by clicking “Pages” (screenshot 2 - the banner hangs over the end of the 4th button and there is a visible gap). This is with banner dimensions at width="100%" height="100%" and button dimensions at width="24.5%" height="24%"

If I fix it so it looks correct when accessed by clicking ”Pages” (banner the same, buttons at width="24.6%" height="24%" ) then it hangs the 4th button out below in the next row when accessed by clicking “Home” (screenshot 3). 

I’ve tried every combination of banner and button size I can think of to try and make this work and no matter what I do it looks wrong when accessing the page one of the two ways. I can’t mark this project as done until it looks correct when accessed both ways and I’m really tired of working on it. Please help, what do I do?

[Chris_Hofer]

@designhelp ...

Have you tried modifying the actual size of the images?  For example, let's say that your banner is 400 pixels wide.  Then, you could make your four smaller buttons each 100 pixels wide (or maybe slightly smaller so that you can allow a bit of white space between each of them).

[designhelp]

the original banner asset is currently 1500 x 250 and the buttons are 1000 x 160, I was making the size adjustment in the RCE. I need to make sure the banner goes across the entire screen on a 27" ultrawide monitor and I'm concerned a width of 400px won't do that at 100% and that if I use "span" that it will be pixelated, but I'm willing to give it a try.

Maybe if I made the buttons 375px wide (1500 / 4) then the same idea will apply. I will give it a try and report back.

[Chris_Hofer]

@designhelp ...

Thanks for that information.  I tried chatting with a Canvas Support technician to see if there was a recommended maximum length (in pixels) for banners on Canvas pages.  But, there wasn't any documentation on it.  However, this link was provided which may be of some help:

Banner image dimensions

[designhelp]

Got it, thank you. The banner is already wider than the entire screen before making any changes in the RCE so I am already doing what that solution suggests.  I also have it set so each of the 4 buttons takes up 24.5% of the screen width... they are 24.5% to account for the padding between buttons, if I set the sizes to 24.6% width then the 4th button gets hung out below in a separate row, as seen in the screenshots in my original post. Canvas does not allow for image size specifications beyond the the first decimal point so I cant, for example, set it to 24.54% or anything like that. I will keep working on this. 

[arking · Accepted solution]

Have you considered using the Flexbox Grid system? I think using something like this for the buttons should do it:

<div class="content-box">
<div class="grid-row">
<div class="col-sm-12
col-md-6
col-lg-3
col-xl-3">
<div class="styleguide-section__grid-demo-element"><p>Button 1</p>
</div>
</div>
<div class="col-sm-12
col-md-6
col-lg-3
col-xl-3">
<div class="styleguide-section__grid-demo-element"><p>Button 2</p>
</div>
</div>
<div class="col-sm-12
col-md-6
col-lg-3
col-xl-3">
<div class="styleguide-section__grid-demo-element"><p>Button 3</p>
</div>
</div>
<div class="col-sm-12
col-md-6
col-lg-3
col-xl-3">
<div class="styleguide-section__grid-demo-element"><p>Button 4</p>
</div>
</div>
</div>
</div>

(you'll have to fill in the button content.) This should make it so that it will line up perfect, with 4 buttons on large screens, and then two rows of two buttons on smaller screens.