Solution 1 :

#1
On the card, change d-sm-flex to d-flex. d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don’t want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath

#2
It looks like you already have it below the card within the card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.

For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:

.card.flex-sm-column.flex-md-row

.card-footer.align-self-md-center

I would also recommend that if you make any CSS selector adjustments, don’t make them directly on the .card selector. Add another CSS class to these specific cards, like <div class="card card--song" />, so that you don’t override the global .card styling provided by bootstrap and instead override it at a component level (.card--song).

Problem :

I lifted the code to create a horizontal card for my band’s website which can be seen here:

http://www.jukeboxjunkies.rocks/Song

I really like the look – but when the cards are viewed on a mobile device, the rows stack and I don’t like it as much.

The version I like

vs:

the version I don’t like (shows like this on smaller devices)

So, 2 things…

  1. How do I prevent the rows from stacking?
  2. I need to add a link on the far right that will just say “Request” – This will show up based on a setting in my database (basically if I turn on requests for the gig) – I am not worried about the styling, I can do that later (although I just will want it centered top to bottom of the card). But I need help with bootstrap code to show or not show.

I can put the HTML code in here – but it can be seen on the site – let me know if I need to post it here and I will.

Comments

Comment posted by Ben Sewards

on the card, change

Comment posted by Mike Henry

Ok I believe I have the cards not stacking and all looks good there. I just published the changes. Now I need to make the request link good for both normal and mobile. Maybe out to the right on normal bigger screens but stacked down blow on mobile? Ideas?

By