I can't understand why is the background pattern opacity lowers the opacity of the text which is above it (Article Name and Article). How to make text with 0% opacity and background opacity 32%?
This is my code:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="main-content">
<h1 class="logo margin-section">Article Name</h1>
<p>Article</p>
</div>
</div>
</div>
And CSS looks like this:
.col-sm-3 {
background-image: url(../images/pattern.png); opacity: 0.32;
margin-left: 7%;
}
Related
In this code i am preparing a portfolio, now when i am placing an
image in my portfolio the image is not filling the border div and
going a side as you can see in the picture <IMAGE-first half> , <IMAGE-second half>. Can someone help me to keep four images that has borders only to the image and I need all four images placed like four boxes?
<section class="latestwork" id="work">
<div class="container">
<div class="row">
<div class="heading">
<h2 class="boxx">My Latest Work</h2>
<h6>These are my latest mobile photography captures</h6>
</div>
</div>
<div class="row">
<div class="myworkbuttons">
<button type="button" class="myworklink" data-filter="all">All</button>
<button type="button" class="myworklink" data-filter="creative">Creative</button>
<button type="button" class="myworklink" data-filter="black&white">Black/white</button>
<button type="button" class="myworklink" data-filter="portrait">Portraits</button>
</div>
</div>
<div class="row">
<div class="portfolio-items" data-category="urban-floods">
<div class="portfolio-inner-item" style="">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\The Disaster of 2020.jpg" alt="Image not loading">
</div>
</div>
<div class="portfolio-info">
<h4>Iso: </h4>
</div>
</div>
<div class="portfolio-items" data-category="buffalo">
<div class="portfolio-inner-item">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\buffalos path.jpg" style="float: left;" alt="Image not loading">
</div>
</div>
</div>
</div>
This is happening because the size of the image is not big enough.
Try adding width: 100% of the image component.
you can use grid and and use css importing file and try this code: .div{background-image: url("/assets/pics/picture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-height:50vh; min-width:50vw }//(or what size do you need.);
I am building a complex page with multiple sections based on the latest fullpage.js release (developer license). I have 3 full-height sections with auto scroll and then 3 more sub-sections. In the code it basically looks like this:
<div id="fullpage">
<div class="section">content</div>
<div class="section">content</div>
<div class="section">content</div>
...
<div class="section sub-section">content</div>
<div class="section sub-section">content</div>
<div class="section sub-section">content</div>
</div>
I want these sub-sections to have a normal scroll, is this possible?
Not something fullPage.js provides yet.
The most you can do is include all those last sections inside the last section of your site and then use scrollOverflow:true to emulate the normal scroll behaviour as in this example.
See this demo online
<div id="fullpage">
<div class="section">content</div>
<div class="section">content</div>
<div class="section">content</div>
<div class="section">
<div class="sub-section">sub content</div>
<div class="sub-section">sub content</div>
<div class="sub-section">sub content</div>
</div>
</div>
Using something like this:
sub-section{
height: 100vh;
width: 100%;
}
.sub-section{
background: red;
}
.sub-section:nth-child(1){
background: red;
}
.sub-section:nth-child(2){
background: blue;
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--primary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
<p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
</div>
</div>
</div>
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div></a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've got a modal on my site, and use the following to display a thumbnail image:
http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg
The problem is the video has an aspect ratio of 21:9. I've used the following styles, but still get the black letterbox on both the top and bottom of the image. Is there a way to just display the YouTube thumbnail without the black letterbox?
&__container {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
margin-bottom: 1rem;
a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
I've modified your sample code to add two new CSS rules to correspond to a class your HTML already had with no styles:
.m-modal-video__container--cinemascope defines the container around your cinemascope-ratio image, using the padding-bottom trick you'd previously tried implementing.
.m-modal-video__container--cinemascope img defines the sizing and positioning of the image inside the above container. Knowing you want this image to maintain its aspect ratio and not stretch, I've removed the height: 100% rule (so the height is automatically calculated) and vertically centered the image with the top: 50% and transform: translateY(-50%) trick.
This is all needed because YouTube still produced a 16:9 JPG thumbnail for your video despite its 21:9 ratio, so we're essentially using this trick to hide the black bars in the image. I still see a tiny sliver poking through, but you slightly adjust your padding-bottom ratio if you were worried about that, or increase your img's width past 100%.
.m-modal-video__container--cinemascope {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
}
.m-modal-video__container--cinemascope img {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div>
</a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
What is the best way to Change width of drop down in semantic UI, so that it will be responsive.
<div id="city" class="colomn ui search selection dropdown" style="min-width: 121px; white-space: nowrap; max-width: 251px;">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select City</div>
<div class="menu">
<div class="item" data-value="Ahmedabad">Ahmedabad</div>
<div class="item" data-value="Bangalore">Bangalore</div>
<div class="item" data-value="Chennai">Chennai</div>
<div class="item" data-value="Delhi">Delhi</div>
<div class="item" data-value="Hyderabad">Hyderabad</div>
<div class="item" data-value="Kolkata">Kolkata</div>
<div class="item" data-value="Mumbai">Mumbai</div>
</div>
</div>
<style>
.ui.dropdown>.text {
display: block !important;
overflow: hidden;
}
</style>
I've got a carousel on my index page, but I've noticed that if I shrink my browser, the image doesn't stay within the whole carousel.
If you don't understand what I mean, here's an image of the carousel after shrinking the browser:
As you can see, the width of the image responds to the browser window size, but the height doesn't, leaving that big white space below the image.
Here is my current code:
<div class='carousel slide' id='hero' style='position: absolute;'>
<div class='carousel-inner' style='z-index: -1'>
<div class='active item'>
<img src='images/index/img1.jpg'>
</div>
<div class='item'>
<img src='images/index/img2.jpg'>
</div>
<div class='item'>
<img src='images/index/img3.jpg'>
</div>
<div class='item'>
<img src='images/index/img4.jpg'>
</div>
<div class='item'>
<img src='images/index/img5.jpg'>
</div>
<div class='item'>
<img src='images/index/img6.jpg'>
</div>
</div>
</div>
How do I make the images within the carousel respond to smaller browser windows?
So I've fixed it myself after some more research.
In the CSS, I had this:
.carousel-inner {
overflow:hidden;
width:100%;
position:relative;
}
I fixed it by putting the dimensions of the images instead of the 100% width, so:
.carousel-inner {
overflow:hidden;
width:1920px;
height:1200px;
position:relative;
}