Bed and Breakfast Demo Raw Content 3 Columns

Support
#1

Hello Guys

I’m trying to utilize the nice rooms section of the demo called bed and breakfast, however I would need 3 photos side by side instead of 2.

The raw content at the moment is:

Murphy Standard From $149 a Night
Murphy Exclusive From $289 a Night

I assumed that adding another ahref section would make this work, but it created another picture below the orignal 2. Could you please help me figure out how to get 3 pics side by side instead? Would I need to edit the <div class="x-bnb-image-grid"> to make this happen? If yes, could you please send me the required change?

Thank you :slight_smile:

#2

Hey Richard,

You will need to duplicated this part:

<a href="http://dev-pro2.pantheonsite.io/accommodations/murphy-exclusive/">
    <span class="bg" style="background-image: url(http://dev-pro2.pantheonsite.io/wp-content/uploads/bg-exclusive.jpg);"></span>
    <div>
      <span>Murphy Exclusive</span>
      <small>From $289 a Night</small>
    </div>
  </a>

Then, go to X > Theme Options > CSS and look for this selector .x-bnb-image-grid > a and in this declaration:

  -webkit-flex: 1 1 360px;
          flex: 1 1 360px;

Change 360 as per your needs. In case you don’t understand what I mean, please watch the screencast at https://youtu.be/gdj7KkbpSQ8

Please just note that the purpose of the guide is to give you an idea only. We won’t be able to provide further enhancements to the code as that would be veering into custom development and you will also need to watch out for syntax errors like omitting a character in the code because it is the user’s responsibility to fix custom code issues so I’d recommend that you learn how the code works if you wish to enhance and or fix it. You can start learning from sites like https://www.w3schools.com/ and I’d just recommend the tools below to check for HTML and CSS syntax errors.

Hope that helps and thank you for understanding.

#3

Hi Christian

Thanks! Changing those to 240 worked magic :slight_smile:

Sorry for late reply. Have a great day! :slight_smile:

#4

glad to know that!

Thanks

#5

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