Slideshow is not seen in its entirety on the mobile screen - html

as you can see in this photo: https://postimg.cc/YLC0cnsY the photo of the slideshow is not shown in full on the mobile screen. I wanted to see it in full, so that it would fit the screen, bootstrap if possible.In the computer it's shown right, but the problem it's in the movile screen. This is my css code and my html code:
.contenedor{
width:485px;
height:540px;
margin :auto;
}
.slick-prev:before, .slick-next:before {
color:black !important;
}
<html>
<head>
<title>Slide</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="js2/slick/slick.css">
<link rel="stylesheet" href="js2/slick/slick-theme.css" charset="UTF-8">
<link rel="stylesheet" href="css2/estilos.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
</head>
<body>
<div class="container-fluid">
<div class="contenedor">
<div class="slideshow2" >
<div class="slide slide1">
<img src="img2/1.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/2.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/3.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/4.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/5.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js2/slick/slick.min.js"></script>
<script>
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:true,
centerMode: false, //centrar foto
slidesToShow: 1,
slidesToScroll: 1
});
</script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="js/utilidades.js" type="text/javascript"></script>
</body>
</html>

try this:
HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="slideshow">
<center>
<img src="src of your first img" height="400px">
</center>
</div>
</body>
</html>
CSS:
<style>
#slideshow {
border: solid 20px;
margin: 0 auto;
background-color: black;
display: table;
height: 40%;
width: 100%;
}
</style>
JavaScript:
<script>
let adding = 1;
setInterval(function () {
document.getElementById("simg").innerHTML =
"<img src=\"p" + adding + ".jpg\" height=\"400px\"/>"
adding++
if (adding > 8) {
adding = 1
}
}, 3000);
</script>
name your imgs like p1.jpg,p2.jpg etc.
I named them like that.If you want yo can change,but also change
the 4rth line in script with your img name.
to make it fit to the screen on mobile use bootstrap.

thanks for your answer but i finally resolved it setting max-width and max-height instead of width and height:
.contenedor{
max-width: 485px;
max-height: 540px;
margin:auto;
}
and removing class="img-fluid" from the images on the slide code.

Related

The HTML & CSS code is not showing the same output in my actual project, that I have fixed in another separate html file

I would like to make my output of the Html and CSS file like this (ss#1); I've created this using a separate HTML and CSS file, but when I'm putting it on my actual Html and CSS file it turns out to be like this (ss#2). How can I fix this?
Here is the source code for ss#1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
html,
body {
position: relative;
height: 100%;
}
body {
display: flex;
justify-content:center;
align-items:center;
}
.swiper {
width: 200px;
padding-top: 200px;
padding-bottom: 0;
}
.swiper-slide {
display: flex;
align-items:center;
justify-content: center;
border-radius: 15px;
}
.swiper-slide img{
display:flex;
width: 100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img4.JPG" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img1.JPG" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img11.jpeg" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img7.jpeg" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img10.png" />
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
effect: "cards",
grabCursor: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
</body>
</html>
<!-- end snippet -->
here is the source code for ss#2
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<title>Instant Resume Builder</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css">
<script src="https://kit.fontawesome.com/f5ba79b0f3.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="style.css">
<style>
section{
position: absolute;
width: 100px;
min-height: 20vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 0.50%;
padding: 0.50%;
}
.swiper {
width: 100%;
padding-top: 120px;
padding-bottom: 0;
}
.swiper-slide {
display: flex;
align-items:center;
justify-content: center;
border-radius: 15px;
width: 100%;
height: 100%;
}
.swiper-slide img{
display:flex;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="logo">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/logo.png">
</div>
<div class="section">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img4.JPG" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img1.JPG" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img11.jpeg" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img7.jpeg" />
</div>
<div class="swiper-slide">
<img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img10.png" />
</div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
effect: "cards",
grabCursor: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
</div>
</body>
</html>
If you are using VS Code I think I can help. First of all, before pasting the style code, come to the beginning without any tab space and paste it there. Then after selecting the whole style code, you can adjust it by pressing the tab / shift + tab keys.
Also, as I said at the beginning, if you are using VS code, you can try to install and adjust the Prettier plugin. (Format on save feature must be turned on in settings) This could also be a solution.

Adblock Changes My Paragraph Position whenever I turn it on or off

How come whenever I turn on or off my adblock my paragraph/text changes positions. When I turn on adblock and the ads are off the paragraph goes all the way at the bottom, and when I turn off adblock where the ads are on the paragraph changes and goes to a place where I want it to be but I want it to stop moving positions whenever I turn on/off adblock I just want it to stay in one place.
here's my webpage
.Copyright {
width: 700px;
height: 177px;
margin-top: 1895px;
margin-left: 615px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="https://adventureplus.ca/webicon.ico" type="image/icon">
</head>
<head>
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
<link rel="stylesheet" href="aboutstyle.css">
</head>
<body class="aboutbg">
<body>
<div>
<img src="adventureplusbodypage.jpg" class="bodypage" alt="ed">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
</body>
<div class="main">
<a href="index.html">
<p align="center"> <img src="new adpluslogo.png" class="Pluslogoon" alt="HTML Tutorial"></a>
</p>
<div class="menu">
<div>
<img src="new navbar.png" class="nav" alt="nav">
</div>
<img src="Aboutbar.png" class="Aboutbar" alt="about">
<img src="Archivebar.png" class="Archivebar" alt="archive">
<img src="Extrasbar.png" class="Extrasbar" alt="extras">
<img src="Charactersbar.png" class="Charactersbar" alt="characters">
</div>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<link rel="stylesheet" type="text/js" href="jsabout.js">
</body>
<div>
<img src="friends, graduations , and begininigs part 86.jpg" class="Part99" alt="img">
<link rel="stylesheet" type="text/css" href="Navi.css">
</div>
<div>
<img src="aboot.jpg" class="Acrbar" alt="img">
<link rel="stylesheet" type="text/css" href="Navi.css">
</div>
<head>
<div>
Previous »
Next »
</div>
</head>
<div>
<img src="ben banner.jpg" class="bensbanner" alt="mn">
<link rel="stylesheet" type="text/css" href="Other.css">
</div>
<div>
<a href="https://twitter.com/Anonymisartist?lang=en">
<img src="twitterlogo.png" class="Twat" alt="img">
</a>
</div>
<div>
<a href="https://www.deviantart.com/sanrokk?rnrd=258670">
<img src="deviantartloglo.png" class="deviant" alt="img">
</a>
</div>
<div>
<a href="https://instagram.com/anonymisartist/?hl=en">
<img src="instalogo.png" class="insta" alt="img">
</a>
</div>
<div>
<head>
<div id="disqus_thread" style="height: 538px; width: 1200px; margin-left: -415px; margin-top: -247px">
<script>
var disqus_config = function() {
this.page.url = 'https://adventureplus.ca/January202020.html';
this.page.identifier = 'January202020.html';
};
(function() {
var d = document,
s = d.createElement('script');
s.src = 'https://adventureplus-ca.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<link rel="stylesheet" type="text/css" href="Navi.css">
</ul>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
</div>
</div>
</head>
</script>
<div>
<link rel="stylesheet" type="text/css" href="Other.css">
<div class="Commentary">
<h1>Hi Guys</h1>
<p>Welcome to my site. This is where I will be posting lots of ADplus content and plus more juicy stories. Just sit back and relax and enjoy the fun "adventures" of this webcomic has to offer. The comic updates every weekdays. Stay tuned for more updates
soon to come :).</p>
</div>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<link rel="stylesheet" type="text/js" href="jsabout.js">
</body>
</div>
</head>
<div>
<img src="placeholder.jpg" alt="img" class="adone">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
<div>
<img src="adtwo.jpg" class="adstwo" alt="i">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
</div>
<head>
<style type="text/css">
.adslot_1 {
max-width: 190px;
max-height: 772px;
}
#media (min-width:193px) {
.adslot_1 {
width: 193px;
height: 770px;
}
}
#media (min-width:193px) {
.adslot_1 {
width: 193px;
height: 770px;
}
}
</style>
<ins class="adsbygoogle adslot_1" style="display: block; position:relative;margin-top: -1469px; margin-left: 315px; width: 160px; max-height: 600px;" data-ad-client="ca-pub-9710909156400610" data-ad-slot="5003175748"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</head>
<body>
<style type="text/css">
.adslot_2 {
max-width: 728px;
max-height: 93px;
}
#media (min-width:728px) {
.adslot_2 {
width: 728px;
height: 93px;
}
}
#media (min-width:728px) {
.adslot_2 {
width: 728px;
height: 93px;
}
}
</style>
<ins class="adsbygoogle adslot_2" style="display: block; position: relative; margin-top: -869px; margin-left: 725px; width: 728px; height: 93px;" data-ad-client="ca-pub-9710909156400610" data-ad-slot="5873404284"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</body>
<div>
<head>
<div>
<link rel="stylesheet" type="text/css" href="Other.css">
<div class="Copyright">
<p>© 2019–2020 AdventurePlus Comics Created By Nathaniel Enriquez</p>
</div>
</head>
</div>
</html>
output:
Image of Adblock On
Image of Adblock Off
Image of Adblock On

Fixed sidebar causing trouble to bootstrap responsive design

I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.
I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.

clearfix is not working for overflow:auto

I am very bad with css, so someone can help me:
I have following html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cluster Test</title>
<link rel="stylesheet" href="assets/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="assets/script.js"></script>
<style>
.square-thumb
{
float: left;
margin:5px !important;
padding:5px;
cursor: pointer;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
</div>
<div class='clearfix'></div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>
My problem is that the new_div is not rendered correctly. The background color does not show, the height and width are not there etc.
If I comment the following line in the CSS, it works just fine:
float: left;
I read somewhere that adding a clearfix div will work but it does not work either. Can anyone help me,I have been stuck for hours now... :(
Put that div right after the floated square-thumbs and change from oveflow:auto to clear:both.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cluster Test</title>
<link rel="stylesheet" href="assets/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="assets/script.js"></script>
<style>
.square-thumb
{
float: left;
margin:5px !important;
padding:5px;
cursor: pointer;
}
.clearfix {
clear:both;
}
</style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
<div class='clearfix'></div>
</div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>

Twitter Boostrap 3 page is not responsive

I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>