I am trying to create a slideshow on my website, but whenever I add JavaScript it seems to break the desktop version. I want these three pictures to remain static and only start sliding when viewed on a mobile device. I have searched for resources on how to achieve this but couldn't find any. Can anyone help?
Consider assigning a class to your images and applying CSS directly to them instead of the surrounding div.
Alternatively
You could utilize background-image in your CSS rather than including the image in your HTML code.
By implementing this CSS, your image will adjust its size based on the container.
.container{
background-color:blue;
width:100%;
height: 300px;
}
.slot-one{
background-color:grey;
height: 50%;
width:50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url('https://cdn.vox-cdn.com/thumbor/e4KRzS--UsuixA2G8TOCwJ-O024=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/6839749/pokemon.0.png');
}<div class="container">
<div class="slot-one">
<h1> TEXT</h1>
</div>
</div>It appears that using display flex and setting the width to 100% should not result in any issues with covering.
If I have misunderstood the problem, please provide us with more information so we can better assist you.
.container{
width: 100%;
display: flex;
}
.container div {
border:1px solid red;
}
.container div img{
width: 100%;
height:auto;
}<div class="container">
<div><img src="https://cdn.vox-cdn.com/thumbor/e4KRzS--UsuixA2G8TOCwJ-O024=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/6839749/pokemon.0.png" alt=""></div>
<div><img src="https://cdn.vox-cdn.com/thumbor/e4KRzS--UsuixA2G8TOCwJ-O024=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/6839749/pokemon.0.png" alt=""></div>
<div><img src="https://cdn.vox-cdn.com/thumbor/e4KRzS--UsuixA2G8TOCwJ-O024=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/6839749/pokemon.0.png" alt=""></div>
</div>I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...
I am having trouble placing a fixed-action-btn inside a collapsible body. It keeps appearing in the bottom right corner of the page instead of within the collapsible itself. How can I ensure that the button stays inside the body? Check out this link for r ...
I am working with a form that includes a submit button featuring a background image. <button type="button" class="button" alt="Send" onclick="validate_form_newsletter_wide( form )"></button> Everything works well when I define the dimensions ...
Original HTML code: <span class="specLink"> <specialty><a title="Plastic Surgery" href="link2.aspx">Plastic Surgery</a></specialty> </span> <br /> <span class="specLink"> <specialty2><a titl ...
My challenge lies in loading Chinese characters as keys and their English translations as values from a database into a PHP array, so that I can use them on the client side in JavaScript. The process involves fetching key:value pairs from PHP into a JavaSc ...
Is there a way to access this.props from the <Router>'s onUpdate function? I need to know the current route and access this.props.route in order to identify the page (name). Unfortunately, I haven't found any resources on how to achieve thi ...
How can I dismiss this snackbar when the add to cart <a href> is clicked? I've tried but nothing seems to work. Can anyone provide some assistance? Here is my code: SNACKBAR CODE <div id="snackbar">Some text some message..</div> A ...
One task I am trying to tackle is comparing a component on one page with the same component on another page using Cypress. For example, let's say I have a Pricing Component on the Home page, and I want to verify if the values on the Pricing Page are i ...
Recently, I decided to delve into web design again and embark on a challenging project for my father's baseball business. The main task at hand is creating a detailed calendar using HTML tables. After spending a considerable amount of time perfecting ...
As a beginner developer diving into the world of API's, I've encountered a recurring error in Node.js that seems to be causing crashes: SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at IncomingMessage.<anonymo ...
In my Angular app, I have multiple pages that allow users to make changes such as opening tabs and pills, modals, etc. For instance, if a user opens a modal and then clicks a link within that modal that takes them to another page, I want the original page ...
Managing a large web page with extensive JavaScript functionality can be challenging, especially when dealing with fixed position elements that update based on user scroll behavior. A common issue that arises is the noticeable jumping of these elements whe ...
Recently, while working with the Bulma CSS framework, I encountered an interesting challenge. I wanted to align the navigation buttons to the bottom of the red field, but they appeared to be shifted out of alignment. Despite trying to apply inline CSS styl ...
Recently, I've been practicing my skills with Bootstrap, and I'm determined to understand all aspects of the code. However, one thing that's currently puzzling me is the navbar colors. When I apply the navbar-dark class, instead of displayin ...
I'm attempting to open a link in a new browser tab (not a new window). When I place a link on the page like this: <a href="#" onclick="window.open('http://www.google.com', '_blank');"> Click Here</a> when a user clic ...
I am currently displaying a table with data obtained from a database query. The structure of the table is outlined below: <table id="dt-inventory-list" class="table table-responsive"> <thead> <tr> <th>Field ...
I apologize for the strange request, but I need help with a validation method for form inputs within a modal. Currently, I am checking each this.state.variable and pushing them to an aux array, which is then supposed to be set to the original fieldErrors ...
I am seeking assistance in creating a table with a custom number of rows and columns. The table should have two input fields for specifying the number of rows and columns, and upon submission, the table should dynamically adjust to display the specified nu ...
Recently, I decided to switch over to using Atom on my Macbook and I wanted to set up a keybinding where alt-up arrow would act as page up and alt-down arrow for page down. Despite my efforts, I have not been successful in getting this to work. I'm p ...
I have developed a script that can convert HTML table data into a JSON Object. To accomplish this task, I utilized the jquery plugin created by lightswitch05. With this code, I am able to extract data from an HTML table on the same web page using: var t ...