I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
Im having a little trouble with Firefox and perspectiveOrign. What i want is the origin to be controlled by mousemovement. So i calculate the percentages for origin, and set them like:
document.querySelector('parent').style.perspectiveOrigin = x% y%.
Logging the the value shows that perspectiveOrigin HAS changed but the interface just dosnt follow... or is very very very jaggy. I works like a charm in chrome and safari.
Is there something special i need to do to make Firefox update the UI with the values that it actually already has.
I made a little example here. the x/y percentages for origin is generated randomly onclick. I chrome - it will follow no matter how fast you are clicking, i Firefox - it follows if you click very slowly, but stops updating if you are clicking too fast.
(Im using Firefox Developer Ed. version: 104)
----After having posted this I ran the code-snippet below in the very same Firefox - and it works like it should. But running the EXACT same code from VSCode with LiveServer gives me the problem right away... Is there some polyfill active in the code runner - if so what polyfill?
<!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" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container {
display: inline-block;
border: 1px solid black;
perspective: 10px;
perspective-origin: 50% 50%;
width: 600px;
height: 500px;
}
div {
border: 1px solid red;
}
.layer1,
.layer2,
.layer3 {
position: absolute;
inset: 0;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="container" onclick="changeOrigin()">
<div class="layer1" style="transform: translateZ(-5px)"></div>
<div class="layer2" style="transform: translateZ(-15px)"></div>
<div class="layer3" style="transform: translateZ(-25px)"></div>
</div>
<script>
const myDiv = document.querySelector(".container");
function changeOrigin() {
console.log("in change origin");
x = Math.random() * 100 + "%";
y = Math.random() * 100 + "%";
myDiv.style.perspectiveOrigin = `${x} ${y}`;
}
</script>
</body>
</html>
please i need help
i have my html code which working very fine ,and trying to loadview it as pdf stream
but the output pdf file , not same as html , and text not above image , but get below it
my controller code
public function pdfdownload($id)
{
$id = Crypt::decrypt($id);
$course = Course::where('id', $id)->first();
$orders = Order::where('course_id', $id)->first();
$progress = CourseProgress::where('course_id', $course->id)->where('user_id', Auth::user()->id)->first();
$pdf = PDF::loadView('front.certificate.download', compact('course', 'progress'), [],
[
'title' => 'Certificate',
'orientation' => 'L'
]);
// return $pdf->download('certificate.pdf');
return $pdf->stream('certificate.pdf');
}
my html code
<!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">
<title>Document</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1,h2,h3,h4,h5,h6{
margin: 0 0 15px;
}
.certificate-wrapper{
max-width: 910px;
border: 1px solid #007B83;
}
.certificate-wraper img {
max-width: 100%;
}
/* certificate Antipasto Pro */
.certificate_content {
position: absolute;
top: 182px;
right: 29px;
width: 480px;
}
.certificate_content h2 {
font-size: 29px;
text-transform: uppercase;
color: #29AFA7;
margin-top: 10px;
}
.certificate_content h3 {
text-transform: uppercase;
color: #29AFA7;
font-size: 21px;
}
.certificate_content span {
text-transform: uppercase;
}
.prisciples {
font-size: 25px;
margin-top: 39px;
}
.credit {
margin-top: 27px;
}
.prof {
margin-top: 28px;
}
.date_time {
display: block;
margin-top: 66px;
margin-left: 99px;
color: #000;
font-size: 18px;
}
.code {
margin-top: 22px;
display: block;
margin-left: 83px;
font-size: 14px;
}
/* certificate-end */
.position-relative{
position: relative;
}
</style>
</head>
<body>
<div class="certificate-wrapper">
<div class="certificate-wraper position-relative certificater-img">
<img src="certi-main-bg.png" alt="">
<div class="certificate_content">
<h2>Basma sherif abd alwahab</h2>
<h3 class="prisciples">Principles of Dento-alveolar Surgery
with Live Demo on Suture Techniques</h3>
<h3 class="credit">2 creidt hours</h3>
<h3 class="prof">Prof.Ahmed Elsharkawy</h3>
<div class="certi_abs_content">
<span class="date_time"> april</span>
<span class="code">code</span>
</div>
</div>
</div>
</div>
</body>
</html>
that how img show in html page
html view
that's how pdf stream output looks like
pdf stream
please i would really appreciates any help
, how to solve that
and why pdf not view same as html >?
I think your main issue is that laravel-pdf is a wrapper for mPDF which does not support flex.
See this list for css that is supported: https://mpdf.github.io/css-stylesheets/supported-css.html
I recently began to learn sass and I'm having a problem with media query. Some classes works and others don't, like toggle class.
Here is the code I'm working on:
body {
font-family: sans-serif;
}
nav {
width: 100%;
background: #00316b;
}
nav ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
nav li:hover {
background: #e91e63;
}
nav a {
color: #fff;
text-decoration: none;
}
nav .toggle {
padding: 10px 20px;
box-sizing: border-box;
color: #f7f7f7;
font-size: 30px;
cursor: pointer;
width: 30px;
display: none;
}
nav .toggle:hover div {
width: 30px;
}
nav .toggle div {
height: 4px;
background: white;
margin: 5px 0;
border-radius: 25px;
transition: all 0.3s ease-in-out;
}
nav .toggle .one {
width: 30px;
}
nav .toggle .two {
width: 20px;
}
nav .toggle .three {
width: 25px;
}
#media (max-width: 768px) {
.toggle {
display: block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<!-- font awesome -->
<script src="https://use.fontawesome.com/495f5a11b6.js"></script>
<title>Document</title>
</head>
<body>
<nav class='navigation'>
<div class="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Put the media query inside your .toggle class by indenting 2 levels and remove the other .toggle from your query.
.toggle
// etc ...
#media (max-width: $breakpoint)
display: block
I forked your snippet here: https://codepen.io/anon/pen/ooqxyW
This code works in every other browser I've tried, except IE8.
IE8 appears to ignore the z-index - and the pop-up becomes a pop-under.
It's in the right place, just renders underneath the thumbnail.
Anyone?
Thanks!
HTML:
<a class="thumbnail" href="#thumb">
<img src="comic_a3_thumb.jpg" height="300" width="212" border="0"
style="float:right; margin-top:10px;margin-bottom:10px;"
alt="description" />
<span>
<img src="/images/comic_a3_popup.jpg" />
</span>
</a>
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 0px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
}
The simple answer is to add a z-index value that is greater than the .thumbnail:hover value to the hover state of the span.
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
z-index: 51;
}
Put these lines in your page head
<!--[if IE]>
<style>
#your_faulty_div{
background-color:#000; /*any color it doesn't matter*/
filter: alpha(opacity=0);
}
</style>
<![endif]-->
your_faulty_div is the div which is misbehaving due to IE z-index bug.
Works smooth , i use it in all of my projects where i have positioned elements overlaping.
If I understand you correctly, you want the span to show above the element marked as the thumbnail. You have not specified the z-index for the span element. Here is a working example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Pop-up Test</title>
<style type="text/css">
#vbox {
border: 1px solid black;
height: 200px;
position: relative;
width: 200px;
z-index: 0;
}
#vbox:hover #hbox {
display: block;
}
#hbox {
border: 1px solid blue;
display: none;
height: 200px;
left: 50px;
position: relative;
top: 50px;
width: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div id="vbox">
<p>Hover over this box to show a hidden "pop-up".</p>
<p id="hbox">This box is a pop-up.</p>
</div>
</body>
</html>
The way to fix this issue is by adding a class to the thumbnail image like this:
.thumbnail:hover img.thumb {z-index:-50; position:relative;}