Make Image "non-responsive" with fixed column width

I am creating a template page that uses a banner/header, made up of 3 columns. In order for the text in the middle column to be almost flush (i.e. slight margin) with the image in the 1st column I have reduced the 1st column’s width to 17%.

These type of templates will auto load with javascript at a responsive window size of (650 h x 550 w). The issue I am having is that the image in column 1 is being forced to be a smaller image because of this default “responsive” size of the window AND because I set the column width to 17%. Is there a way to force an image to be non-responsive while everything else remains responsive?

Does that questions make sense?

Please see the link below for an example. The image of the female is what I want to remain the same size independent of responsive design:

https://www.quickpictours.com/tour/mls-1332242/

Hey David,

I wasn’t able to get the website to pull up for me. However, there really isn’t a way to make an image non-responsive in BB. One option I may suggest would be to adjust the mobile responsive settings in the advanced tab to make just the image column 100% wide so that it stacks above or below content and thus would stay fairly large if that makes sense. Give it a shot and let me know if that works for you.

Best,
Billy

I just checked the link again. It should be working. What do you see when you click on it?

Hey David,

The reason the image is shrinking is because the column width is set to 17% of the total width of the viewport. As its width is reduced, its height is reduced as well to maintain aspect ratio. If you want to remove the responsive aspect of that column, give it a class/ID then assign a specific width in px. Also declare it important.

Hope this helps!

Ben

Hi, I am completely new to BB and not a developer (even though I have some knowledge of HTML and CSS).

I am having the same problem as David. I would like the left and right column to fit an logo and a button with fixed size, and have the middle as responsive menu. (Some things like this: http://news.microsoft.com/stories/index.html

I have two problems.

  1. Where do you put custom CSS code in BB?
  2. Is there a way to avoid that a 3 column row end-up having rows stack above each other on mobile?

The stacking is great for post and many others things but it’s not great to have the menu stack on 3 different lines.

So far I like BB. I really hope it’s gonna make my days.

Hey Emmanuel,

Welcome to the BB forums! And glad you’re liking the product! :slight_smile:

  1. This is theme dependent. If you're using the BB theme, you can place it under Appearance > Customize > Code > CSS Code. Or on your Child Theme's style.css file.
  2. Not possible through BB settings. But can be done via custom CSS. Let us know if you need help with that

Ben

Thanks! I decided to use the menu from the theme/wordpres, as I have not time to play with CSS right now. I was missing the search icon, but found I had to click on a box somewhere in the theme, and now it’s there. :slight_smile:

Hey Emmanuel,

That’s good to know! Enjoy BB! :slight_smile:

Ben