Dealing with problems in col-md display on tablet devices

When viewing on Full Screen and mobile, the ranges panel (class="col-md-3") displays correctly. However, on tablet screens, the left column is obscured by the youtube image panel (class="col-12 col-md-9").

I have attempted various adjustments to the div style, but my knowledge of Bootstrap css is not sufficient to resolve the issue. Any assistance would be greatly appreciated. www.topjocks.co.za/saddler/

In full screen mode, the left ranges panel should not be hidden behind the youtube image.

Answer №1

It appears that your Range Image extends beyond the boundaries of col-md-3 when viewed on a tablet, causing the right portion of the image to be cut off.

To resolve this issue, consider adjusting the col-md-3 class to col-md-5 and updating the youtube div to col-md-7.

Answer №2

To optimize the layout for your website, utilizing the appropriate bootstrap grid system is crucial. Given that the image being used is elongated, it is advisable to leverage the specific column classes tailored for various screen sizes.

<div class="col-md-5 col-lg-3">
</div>

<div class="class="col-12 col-md-7 col-lg-9"">
</div>

Implementing this approach will address the tablet compatibility issue on your site. For further details on grid systems, check out https://getbootstrap.com/docs/4.3/layout/grid/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uncovering the characteristics of a GeoJSON data layer within Google Maps V3

Is there a way to access the properties of the data layer itself when loading a geoJSON file into a Google Map? I understand how to access the individual properties like posts_here, but I'm interested in obtaining the properties for the layer as a wh ...

Struggling to get JavaScript to successfully load a .txt file in order to load various links

I created a cool feature that takes users to a random link, but I currently have a large list of links and wanted to find a way for JavaScript to read them from a text file. The code I have tried so far is not working, and I have experimented with other s ...

Managing onChange in a ReactJs project

Currently, my React tsx page features input boxes like the following: <textarea value={this.state.myData!.valueOne} onChange={(e) => this.handleValueOneChange(e)}/> <textarea value={this.state.myData!.valueTwo} onChange={(e) => thi ...

When attempting to utilize useReducer hooks in React, I am encountering an issue

this is my unique code snippet import React, {createContext, useContext, useReducer } from 'react'; // defining the data layer export const StateContext = createContext(); // creating a provider export const StateProvider = ({ reducer, initi ...

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

Blue Jay Guarantees: Construct props object on the fly and execute simultaneously

If we take a look at this example: https://github.com/petkaantonov/bluebird/blob/master/API.md#props---promise Promise.props({ pictures: getPictures(), comments: getComments(), tweets: getTweets() }).then(function(result) { console.log(re ...

Venom Bot encounters issue with sending files, displaying "Error processing files" message

When attempting to send a PDF in the code snippet below, I encountered the following error: app.post('/send-pdf',[ body('number').notEmpty(), ], async (req, res) => { const errors = validationResult(req).formatWith(({ msg }) =&g ...

Challenge with Sequelize Many-to-Many Query

Currently, I am facing an issue with connecting to an existing MySQL database using Sequelize in Node. The database consists of a products table, a categories table, and a categories_products table. My goal is to fetch products, where each product includes ...

Iterate through the complex array of nested objects and modify the values according to specified conditions

I am currently iterating through an array of objects and then delving into a deeply nested array of objects to search for a specific ID. Once the ID is found, I need to update the status to a particular value and return the entire updated array. Issue: Th ...

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list? Is it possible to solve this issue with just CSS, or wo ...

Utilizing webpack to import both d3 and d3-cloud libraries

I've been attempting to integrate d3 and d3-cloud (for word cloud) into my AngularJs(v - 1.4) app by using: import d3 from 'd3' import d3Cloud from 'd3-cloud'. However, when trying to use d3-cloud with d3.layout.cloud(), ...

Is there a way to refresh autocomplete/autofill after form submission with a custom JavaScript function?

I've developed a Vue application that includes a form. Once the user clicks on submit, an Ajax request is made using Axios through a JavaScript function. The data being sent is a custom JSON object that I have constructed by combining the information ...

What could be causing the linter in vue js to not properly lint the template?

I'm struggling to get the linter to properly lint the template section of my .vue files. Any suggestions on how I can configure this? Basically, I want the linter to format something like this: <template> <v-container> <h1>Ho ...

How can you run a function in JavaScript or TypeScript that is stored as a string?

Is there a way to call a function that is stored as a string? For example: var dynamicFun = `function Hello(person) { return 'Hello' + person; }` In this case, the dynamicFun variable can store any function definition dynamically, such as: var ...

Avoid TypeError: cannot read property '0' of undefined in a Vue.js/Django project

I am currently working on a Django/Vue.js application. Upon submitting the login form, the Django view redirects to the user's username page, where the Vue.Js file retrieves data from the server. Below is the code snippet: async created(){ await ...

Set a variable in PHP by passing a value

In continuation of my previous post, I realized I missed a point and needed to start a new thread. Thankfully, I found a solution for the issue in my previous post and here is the final code: Scrapping code not working in php <?php $html = file_get_co ...

What is the process for obtaining intersection set data from an array?

I'm trying to find the intersection set within an array only containing type 1 and 2. Can you help me with that? var arr = [ { id: 1, auths: [ { authId: 1, type: 1, value: 'Test1' }, { authId: 2, type: 1, ...

Add a third-party library file to Visual Studio

I'm currently working in Visual Studios and attempting to utilize the library provided at . However, I am encountering difficulties when trying to import the library. I have added the file to the project and attempted to use it within the Book.js (Vi ...

How can components be utilized with v-edit-dialog?

Hey there, I've been exploring the v-edit-dialog component offered by Vuetify and had a query about its implementation. Currently, I'm structuring my v-data-table in a way where I'm importing a component with props into a template slot. The ...

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

I'm currently facing an issue with my code. I am attempting to invoke my openPop() function with the input parameter 'pop' within some of my sensor code, but no pop-up is appearing even though I believe I am calling the popup correctly. If a ...