I am looking to display a sample app screen inline with a form on my website.
I have attempted to use the following code in the slider's CSS:
display: inline-block;
overflow: hidden;
white-space: no-wrap;Unfortunately, this has not been successful.
The website is built using Bootstrap 4.0 and can be accessed at the following link:
Here is a screenshot of the desired layout:
https://i.sstatic.net/p1ALH.jpg
Any assistance is greatly appreciated. Thank you!
Adjust the class structure by removing col-md-7 from the header-text class and adding col-xs-6 to two divs inside (form and image).
<div class="row v-center">
<div class="col-xs-12 header-text">
<h2>Travel Deals Over Messaging</h2>
<p>Best Travel Deals over Facebook Messenger or WhatsApp.</p>
<!-- Search form -->
<div class="form-row **col-xs-6**">
....
</div>
<div class="hidden-xs **col-xs-6** hidden-sm">
.....
</div>
</div>
</div>Make sure to add 'col-md-6' to the form div and change col-md-7 to col-md-12. You can see the output in the screenshothttps://i.sstatic.net/lC9RH.png
It's necessary to replace the existing code with this one
div class="col-xs-12 col-md-12 header-text">
<h2>Travel Deals Over Messaging</h2>
<p>Best Travel Deals over Facebook Messenger or WhatsApp.</p>
<!-- Search form -->
<div class="form-row col-md-4">
<div class="form-group col-md-6">
<label for="travelFrom">Travelling from:</label>
<input class="form-control" type="text" placeholder="Singapore" readonly="">
</div>
<div class="form-group col-md-6">
<label for="travelTo">Travelling to:</label>
<select class="form-control" id="to">
<option>Indonesia</option>
<option>Malaysia</option>
<option>Thailand</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Japan</option>
<option>Maldives</option>
<option>Others</option>
</select>
</div>
<label for="exampleFormControlSelect1">Number of Travellers:</label>
<input type="number" class="form-control" placeholder="Enter the number of travellers">
<a href="https://m.me/weekendgowheresg" class="fb-msg-btn" target="_blank"><img src="https://cdn.snaptravel.com/facebook-messenger-white.svg" style="width:30px;height:30px" alt="Facebook Messenger logo">Get Deal on Messenger</a>
<a href="https://wa.me/93900052" class="wa-msg-btn" target="_blank"><img src="images/whatsapp.svg" style="width:30px;height:30px" alt="WhatsApp logo">Get Deal on WhatsApp</a>
</div>
<div class="hidden-xs hidden-sm col-md-8 text-right">
<div class="screen-box screen-slider owl-carousel owl-theme owl-responsive--1 owl-center owl-loaded">
<div class="owl-stage-outer"><div class="owl-stage" style="transition: all 0s ease 0s; width: 2178px; transform: translate3d(-726px, 0px, 0px);"><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/screen-4.jpg" alt="">
</div></div><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/screen-5.jpg" alt="">
</div></div><div class="owl-item animated owl-animated-out fadeOut" style="width: 242px; margin-right: 0px; left: 242px;"><div class="item">
<img src="images/pixel_very_silver_portrait.png" alt="">
</div></div><div class="owl-item animated owl-animated-in fadeIn active center" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/screen-2.jpg" alt="">
</div></div><div class="owl-item" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/screen-3.jpg" alt="">
</div></div><div class="owl-item" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/screen-4.jpg" alt="">
</div></div><div class="owl-item" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/screen-5.jpg" alt="">
</div></div><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/pixel_very_silver_portrait.png" alt="">
</div></div><div class="owl-item cloned" style="width: 242px; margin-right: 0px;"><div class="item">
<img src="images/screen-2.jpg" alt="">
</div></div></div></div><div class="owl-controls"><div class="owl-nav"><div class="owl-prev" style=""><i class="ti-arrow-left"></i></div><div class="owl-next" style=""><i class="ti-arrow-right"></i></div></div><div class="owl-dots" style=""><div class="owl-dot"><span></span></div><div class="owl-dot active"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div></div></div></div>
</div>
</div>
Utilizing Bootstrap's grid system, you have the option to structure your layout accordingly:
<div class="container-fluid">
<div class="row">
<div class="col-7">
<!-- Your content here -->
</div>
<div class="col-5">
<!-- Additional content or sidebar -->
</div>
</div>
</div>
I'm having trouble with my onClick function. When I click, nothing happens and there are no errors to help me diagnose the issue. var data = new FormData(); data.append("cart_list", new_cart); $.ajax({ url: "@Url.Action ...
I currently have a bootstrap navbar displayed on my website. <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Mi Thai Restaurant</a> </div> < ...
Is there a simple way to substitute the standard arrow in the dropdown menu with a custom arrow image? ...
Most of my previous questions have been about input boxes and SQL, as I am still in the learning process. Any help is greatly appreciated. My current question revolves around displaying a button to upload an image using PHP (although for this example, I w ...
One issue I'm facing with my online store is that although PayFast does call my notify_url, it appears that no data is being posted. Below are the codes I've been using: Code for purchasing: <button id="cCart" type="submit" class="bt ...
I recently ran a coding validation check at and encountered the following errors: <div data-role="collapsible-set" id="col"> <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="ui-nodisc-icon"> ...
I am currently utilizing Bootstrap 4 and am attempting to create a card-based layout for showcasing my stores. Within this design, I have a location marker that should appear over the store image with a 5-star rating positioned on the same line, floating t ...
I am facing an issue with highlighting the current page on a navbar. I have a navigation bar that consists of 4 pages - index2.html, page1, page2, and page3.html. Whenever I click on a page link, it briefly turns red to indicate it is active but then rev ...
Particles.js doesn't seem to be functioning properly for me—I'm struggling to pinpoint the issue. Any guidance or suggestions would be greatly welcomed, as I'm unsure whether it's related to an external dependency... HTML: <div ...
Here is the code I am using to create a toggle switch instead of radio buttons, and it works great: .switch { display: block; float: left; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; font-weight: bold; ...
Struggling to figure out how to achieve a blur effect on a slideshow with moving elements? Most resources focus on static images, but I need help with objects in motion. My project involves a jQuery Cycle slideshow, and I want the background areas of over ...
I'm currently facing some challenges understanding the concepts of CakePHP's views, blocks, and layouts. My goal is to have a left and right sidebar displayed on every page, with content that may vary. Right now, I have the right sidebar set up ...
Hello, I am currently using inline JS in my Wordpress navigation menu, redirecting users to a login page when clicked. However, I have been advised to use a regular menu item with a specific class and then target that class with JS instead. Despite searchi ...
Recently, I made an addition to our website which caused the Top Nav and left-hand menu to remain highlighted. I am specifically hoping to keep "Employee training" on the left-hand side highlighted while on the page. If you check out the other pages in thi ...
I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...
I'm trying to assign a specific label value to the dropdownlist instead of the default value, but it seems like I might be making a mistake. @Html.DropDownList("cboCategoria", new SelectList(Model, "ID", "Nome"), new { @id = "cboCategoria", @label = ...
When designing for different devices, I plan to use :span="5" for computers <el-col :span="5" class="container"> and for mobile phones, I intend to use <el-col class="container"> So, how can I incorp ...
I am trying to include an HTML page named Introduction.html (located in the same folder as x.html) within div1. However, it does not seem to be loading properly. Below is a snippet of the code from x.html x.html <!DOCTYPE html> <h ...
I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...
Is there a way to incorporate both a file input and text input into the same form? Appreciate your help in advance ...