I am developing a website and am trying to remove the "View More" button which if clicked on takes you to a bigger verion of the image. My code is below:
HTML
<figure class="effect-oscar wowload fadeInUp">
<img src="images/portfolio/Mahin.png" alt="img01"/>
<figcaption>
<p>MS Site<br>
<a href="images//portfolio/Mahin.png" class = "mahinport" title="MS" data-gallery>View more</a>
View Site</p>
</figcaption>
</figure>
CSS
#media (max-width: 357px) {
.mahinport data-gallery{
display: none;
}
}
#media (max-width: 767px) {
.mahinport data-gallery{
display: none;
}
}
I tried to display the data gallery to none but that doesn't work. Thought it would be really simple but turns out I was wrong, will really appreciate some help.
data-gallery is an attribute.
You would select your element using the attribute selector ([]) like this:
.mahinport[data-gallery] {
display: none;
}
Or simply:
[data-gallery] {
display: none;
}
Related
I'm using a Bootstrap template that flips the navbar between white and transparent on hover and on scrolling.
I have a logo image in the Navbar like so.
<a href="/" class="navbar-brand">
<img width="100px" src="/assets/logo.png" />
</a>
I'd like to be able to load a different logo when the navbar is transparent compared to when it is white.
I've seen a number of different solutions for doing this outside of Bootstrap but there must be a simpler way to achieve this using Bootstrap classes.
I need to have both image urls in the html so was thinking of something along the lines of...
<a href="/" class="navbar-brand">
<img class="logo-white" width="100px" src="/assets/logo-white.png" />
<img class="logo-dark" width="100px" src="/assets/logo.png" />
</a>
But then how can I do something with those new classes based on the set bootstrap classes?
I don't think this is possible with just Bootstrap classes but you could use CSS to toggle the display attribute of the images when the parent navbar is in a hover state:
/* initial states */
.logo-off {
display: block;
}
.logo-on {
display: none;
}
/* hover states */
.navbar:hover .logo-off {
display: none;
}
.navbar:hover .logo-on {
display: block;
}
Here's a codepen.
with thanks to Jacob, my full CSS solution is as follows...
/* initial states */
.logo-light {
display: block;
}
.logo-dark {
display: none;
}
/* hover states */
.navbar:hover .logo-light {
display: none;
}
.navbar:hover .logo-dark {
display: block;
}
/* scroll states */
.navbar.fixed-top .logo-light{
display: none;
}
.navbar.fixed-top .logo-dark{
display: block;
}
The 3 blog posts on this page are no longer stacking (responsive) on mobile. Can someone help me adjust this so the blog post snippets stack on top of each other on mobile? I need it to be responsive on mobile! Also, if you would recommend a way to add a "Read More" link at the bottom of each excerpt that takes users to the blog page.
[![blog posts not stacking][1]][1]
Here is the CSS and you will find the HTML below.
.blog-list {
padding: 0 8px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.blog-list li {
padding-bottom: 20px;
}
.blog-list a {
position: relative;
text-decoration: none;
height: 400px;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}
#media only screen and (min-width: 700px) {
.blog-list {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
}
#media only screen and (min-width: 980px) {
.blog-list {
padding-bottom: 25px;
}
.blog-list h3 {
font-size: 2.4rem;
}
.blog-list a {
display: block;
}
.blog-list a img {
transition: ease all .5s;
}
.blog-list a:hover {
opacity: .8;
}
.blog-list + footer {
padding-bottom: 100px;
}
}
<section class="generic">
<div class="inner">
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/asheville-nc-the-best-place-to-live-if-you-can-live-anywhere/">
<img src="https://bluestoneconst.wpengine.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-6.jpg" alt="">
<h3>Asheville, NC: The Best Place To Live If You Can Live Anywhere</h3>
</a>
<p>Experienced travelers know the best place to eat in Chicago, the best hotel to stay at in New York, the best place to watch the sunset over the Rocky Mountains, the best beach on the East Coast — you get the picture. But what about moving somewhere new? This requires a different set of criteria. Vacation</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/luxury-mens-brand-chooses-bluestone-home-for-fall-catalog-photo-shoot/">
<img width="920" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg 920w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction.jpg 1024w" sizes="(max-width: 920px) 100vw, 920px">
<h3>Luxury Men’s brand chooses Bluestone custom home for Fall catalog photo shoot</h3>
</a>
<p>After a 4 day photo shoot with luxury fashion brand Peter Millar at our client’s rustic custom home for their fall/ holiday luxury men’s apparel catalog, we got some fun aerial and ground shots of our own thanks to Carl Amoth. Very impressive to see what goes into all of the amazing photographs a brand</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/2020-master-design-award-winner/">
<img width="921" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg 921w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1024x767.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1536x1151.jpg 1536w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8.jpg 1600w" sizes="(max-width: 921px) 100vw, 921px">
<h3>2020 Master Design Award Winner for Best Outdoor Environment</h3>
</a>
<p>We are so delighted to win another award for this stunning custom home in Fairview, North Carolina. The work we do represents the best of the best in design, materials, and talent. We thank everyone who helped put this project together. It is always a collaborative creative process that leaves us grateful and satisfied standing</p>
</li>
</ul>
</div>
</section>
[1]: https://i.stack.imgur.com/n4jOn.png
Use display: flex on .blog-list instead of display: grid and then add a media query at about 550px and change the flex direction to column:
body {
margin: 0;
}
.blog-list {
display: flex;
margin: 0;
padding: 0;
}
.blog-list li {
padding: 10px;
list-style-type: none;
}
.blog-list a {
position: relative;
text-decoration: none;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}
#media only screen and (max-width: 550px) {
.blog-list {
flex-direction: column;
}
}
#media only screen and (min-width: 980px) {
.blog-list h3 {
font-size: 2.4rem;
}
.blog-list a img {
transition: ease all 0.5s;
}
.blog-list a:hover {
opacity: .8;
}
.blog-list + footer {
padding-bottom: 100px;
}
}
<section class="generic">
<div class="inner">
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/asheville-nc-the-best-place-to-live-if-you-can-live-anywhere/">
<img src="https://bluestoneconst.wpengine.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-6.jpg" alt="">
<h3>Asheville, NC: The Best Place To Live If You Can Live Anywhere</h3>
</a>
<p>Experienced travelers know the best place to eat in Chicago, the best hotel to stay at in New York, the best place to watch the sunset over the Rocky Mountains, the best beach on the East Coast — you get the picture. But what about moving somewhere new? This requires a different set of criteria. Vacation</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/luxury-mens-brand-chooses-bluestone-home-for-fall-catalog-photo-shoot/">
<img width="920" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg 920w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction.jpg 1024w" sizes="(max-width: 920px) 100vw, 920px">
<h3>Luxury Men’s brand chooses Bluestone custom home for Fall catalog photo shoot</h3>
</a>
<p>After a 4 day photo shoot with luxury fashion brand Peter Millar at our client’s rustic custom home for their fall/ holiday luxury men’s apparel catalog, we got some fun aerial and ground shots of our own thanks to Carl Amoth. Very impressive to see what goes into all of the amazing photographs a brand</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/2020-master-design-award-winner/">
<img width="921" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg 921w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1024x767.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1536x1151.jpg 1536w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8.jpg 1600w" sizes="(max-width: 921px) 100vw, 921px">
<h3>2020 Master Design Award Winner for Best Outdoor Environment</h3>
</a>
<p>We are so delighted to win another award for this stunning custom home in Fairview, North Carolina. The work we do represents the best of the best in design, materials, and talent. We thank everyone who helped put this project together. It is always a collaborative creative process that leaves us grateful and satisfied standing</p>
</li>
</ul>
</div>
</section>
Here's a link to my Codepen: https://codepen.io/ajarrow/pen/oNxmxGr
EDIT
After looking at your website, it looks like there is a media query with a min-width of 700px (any device with a screen width of greater than 700px, which would be a vary large phone) which is handling the .blog-list element. Under that width, the blog-list element no longer has a grid-column-gap defined and the columns are still set to three columns. So if you add a simple media query like below, it should work as expected:
#media only screen and (max-width: 700px) {
.blog-list {
display: grid;
grid-template-columns: 1fr;
padding: 0 8px;
}
}
Also, some other things I noticed while on your website:
The div with an id of site-frame has a margin-bottom of 515 px to allow the location/contact info at the bottom to be seen when the user scrolls to the bottom of the page. That's cool, except that the margin isn't removed when the location/contact info is moved inside the site-frame at 760px. Yep, you guessed it...add another media query with a max-width of 760px:
#media only screen and (max-width: 760px) {
#site-frame {
margin-bottom: 0 !important;
}
}
And you have to use !important because the original margin is inline, which will override anything else unless you use !important.
And then the images in the 'Featured Projects' directly above the 'News' section were being stretched and shrunk/overlapped by their parent element. After a bunch of head-scratching, I fixed the problem with this CSS:
.project-list a img {
max-height: 100%;
object-fit: contain;
max-width: 100% !important;
}
Those are just some things I noticed, you can do what you want. Also, I still didn't see the CSS I gave you the other day...did you remove it or is it not coming through? It looked like you were using WP...to add custom css, log in to the backend of your site and when you're viewing the front page of your site, hit the 'Customize' button (paintbrush icon on mobile) in the header bar at the top. Scroll to the bottom, select 'Additional CSS', and paste the code box on the left. Let me know the results!
EDIT
A very simple way to add 'Read More' buttons would be to borrow the styling from the class special-button (which is being used on the 'Meet With Us' button directly below the posts) with an a element:
Read More
You would have to add this to the bottom of each post and change the href attribute manually. A more dynamic way to do it would be to add this bit of javascript AFTER the blog posts:
<script>
document.querySelectorAll('.blog-list li a').forEach(function(item) {
var newA = document.createElement('a');
newA.href = item.href;
newA.classList = 'special-button';
newA.textContent = 'Read More';
item.parentElement.insertAdjacentElement('beforeend', newA);
});
</script>
I'm trying to show a <span> when #media (min-width: 600px) and in other cases to hide that <span>
So i've created a class called elimina-text with display set to none then in media query i'm setting that class to display inline but the media query is overwritten and the text is not shown...
So my anchor where i have to hide the text looks like this
#media screen and (min-width: 600px) {
.elimina-text {
display: inline;
}
}
.elimina-text {
display: none;
}
<a _ngcontent-qmm-c108="" href="" apphref="" class="text-muted button-remove" ng-reflect-href=""><i _ngcontent-qmm-c108="" class="material-icons">delete</i><span _ngcontent-qmm-c108="" class="elimina-text">Elimina</span></a>
Change the order of the CSS.
.elimina-text {
display: none;
}
#media screen and (min-width: 600px) {
.elimina-text {
display: inline;
}
}
<a _ngcontent-qmm-c108="" href="" apphref="" class="text-muted button-remove" ng-reflect-href=""><i _ngcontent-qmm-c108="" class="material-icons">delete</i><span _ngcontent-qmm-c108="" class="elimina-text">Elimina</span></a>
I would like to have my site remove an image only on mobile which I was able to accomplish using
#media (max-width: 480px) {
.slide-6996 {
display:block !important;
}
.slide-6996 {
display:none !important;
}
}
However, I also would still like to display the text that was on the slide that I am now not showing. I have tried this in CSS, but it obviously didn't work.
#media (max-width: 480px) {
.slide-6996 {
display:block !important;
}
.slide-6996 {
display:none !important;
#slide-content {
display: block !important;
}
}
}
My HTML for this specific instance is
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);">
<div class="slide-body">
<div class="container">
<div class="slide-caption">
<div class="slide-content">
<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
</div>
<h2 class="slide-title"> Let us help you develop an IT Optimization Strategy and Define your technological priorities </h2>
<a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=56ed31cf-ab75-46c7-bf6a-d1eb013fed32&customize_messenger_channel=preview-0&customize_autosaved=on" target="_self"> Learn how we can help you succeed </a>
</div>
<div class="slide-image"></div>
</div>
</div>
</div>
It should also be worth noting that I am on WordPress and am open-minded to any suggested plugins that may fix my issue.
You can't override inline CSS using external CSS, but what you can do is edit your HTML a bit. By adding a new class in that div and in the external CSS you can make rules for what and when to apply.
So, in first line add a new class "background-cls"—your first line needs to be like this:
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light background-cls">
Then in your external CSS add something like this:
#media (max-width: 480px) {
.background-cls {
background-image: none !important;
}
}
.background-cls {
background-image: url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);
}
Here's a fiddle: https://jsfiddle.net/2xb34dev/
With your markup this should work:
#media only screen and (max-width: 480px) {
.slide-6996 .slide-image {
display: none !important;
}
}
Hope that solves it.
You can use #media and then hide that class.
#media (max-width: 576px){
.yourclass{
display:none;
}
}
You can choose 767px or 992px for larger size or you can give your #media with between sizee like following example:
#media screen and (max-width: 576px) and (min-width: 767px) {
.yourclass {
display: none;
}
}
I need to change an html image under 500 px resolution.
I have three images as you can see in the code snippet, but under 500 px resolution I need only one image.
I made the media query, all the css code I have there. I've tried to put the image for mobile in a different container which is set the
display: none
at beginning. And when I'm in the media query
#media all and (max-width: 500px){..}
I set it the
display : inline
But it just won't work. It displays nothing.
I've tried to set for the
#experiential_2_img{
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
but it just displays the image that is set for desktop, too.
Can you advise how can I resolve this?
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}
.experiental-container-mobile { display: inline;}
/*#experiential_2_img {
background: url('images/experiential-insurance_fraud.jpg');
background-size:auto;
width:0px;
height: 0px;
}*/
<div class="home_thirdrow">
<div class="experiental-header">
<h3>Experiential</h3>
</div>
<div class="experiental-container">
<img id="experiential_1_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-amanda_phillies.jpg"
alt="Amanda_Phillies">
</div>
<div class="experiental-container">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-philadelphia_zoo.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container-mobile" style="display: none; ">
<img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="philadelphia_zoo">
</div>
<div class="experiental-container">
<img id="experiential_3_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg"
alt="insurance_fraud">
</div>
</div>
On these days it's always better to develope your site with mobile-stylesheet and extending this for desktop.
Reason:
Desktop-View on Moble :puke:
Mobile-View on Desktop :ok:
#media screen and (min-width: 768px) {
#experiential_1_img {
display: inline;
}
#experiential_3_img{
display: inline;
}
#experiential_2_img {
display: inline;
}
.experiental-container-mobile { display: none;}
}
.experiental-container-mobile { display: inline;}
#experiential_1_img{
display: none;
}
#experiential_3_img{
display: none;
}
#experiential_2_img {
display: none;
}
I do not know how you have the race of the files, but it has looked that this is correct the link of your css file to the project.
It is possible that in the path of background-image it is necessary to go back in the previous folder and then enter in images.
Example:
background: url ('../ images / experiential-insurance_fraud.jpg'); . The two points to move back a directory.