How to change responsive images on Homepage only using Custom Css

Hello Community,

I would like the height of the images on my homepage in desktop view to shrink (https://www.thecigarbible.com/en/home). The current height is perfect for my mobile view but too tall for anything above the mobile breakpoint.

Currently I am using the following code to stretch the images on mobile.

Quote

@media screen and (max-width:640px) {
.sqs-layout .sqs-row .sqs-block:first-child {
   padding: 0 !important;
}
.sqs-layout .sqs-row .sqs-block:second-child {
   padding: 0 !important;
}
  .sqs-layout .sqs-row .sqs-block:third-child {
   padding: 0 !important;
}
}
@media screen and (max-width:640px) {
   .collection-type-blog article {
   padding: 25px !important;
}
}

Which images?

8 minutes ago, tuanphan said:

Which images?

The images containing the text NEWSFEED and ZIGARRE DES MONATS. I copies of the homepage in German and English. The images on both sites would need to change.... 

16 minutes ago, thecigarbible said:

The images containing the text NEWSFEED and ZIGARRE DES MONATS. I copies of the homepage in German and English. The images on both sites would need to change.... 

I remember yesterday, those two images are not the same as they are now .... You can delete the recently added code 😎

1 hour ago, tuanphan said:

I remember yesterday, those two images are not the same as they are now .... You can delete the recently added code 😎

Yes I changed the images.😋

I still do not know how to get the image height to shrink when viewed on a screen larger than mobile though?

10 minutes ago, thecigarbible said:

Yes I changed the images.😋

I still do not know how to get the image height to shrink when viewed on a screen larger than mobile though?

You can use CSS to resize images ... but it will be ugly.

/* Desktop */
@media screen and (min-width:991px) { CSS }
/* Tablet */
@media screen and (min-width:641px) and (max-width:990px) {CSS}
/* Mobile */
@media screen and (max-width:640px) { CSS }

5 minutes ago, tuanphan said:

/* Desktop */ @media screen and (min-width:991px) { CSS } /* Tablet */ @media screen and (min-width:641px) and (max-width:990px) {CSS} /* Mobile */ @media screen and (max-width:640px) { CSS }

I get a Syntax error with this code... Im guessing though it is better not to resize these images on different views.. Im still having problems though with the padding of my website. I want the images in mobile view to be flush with the header. In the other views I want padding applied to these images....I have attached a picture to try and explain myself a bit better.

@media screen and (max-width:640px) {
.Main-content {
    padding-top: 0 !important;
}
}

You are awesome!!!!! Thank you so much 😍

@tuanphan Is it possible to apply that code to a blog post as well, I want to remove the title from the blog post, but doing so leaves me with the same gap..

36 minutes ago, thecigarbible said:

@tuanphan Is it possible to apply that code to a blog post as well, I want to remove the title from the blog post, but doing so leaves me with the same gap..

Can you share link to that page?

2 minutes ago, tuanphan said:

Can you share link to that page?

Sorry! my bad. That article is not published yet...

Here is an article that is published. https://www.thecigarbible.com/de/newsblog/support-your-local

Just to clarify I want to hid the title on all blog posts in the /newsblog 

2 minutes ago, thecigarbible said:

Sorry! my bad. That article is not published yet...

Here is an article that is published. https://www.thecigarbible.com/de/newsblog/support-your-local

Just to clarify I want to hid the title on all blog posts in the /newsblog 

On Mobile?

@media screen and (max-width:640px) {
/* Hide title - gap on all blog posts */
.collection-type-blog.view-item h1.BlogItem-title {
    display: none;
}
}

This code will apply to all posts. Because we can not target the posts on a certain page.
But we can target posts that belong to a certain tag. So, you can set a tag for those posts (eg: camacho), and use this code

@media screen and (max-width:640px) {
/* Hide title - gap on all blog posts */
article.tag-camacho h1.BlogItem-title {
    display: none;
}
}

Ok thank you it worked! That is a shame we cannot target individual blogs. I guess I have to do some editing now heheh 😁

1 minute ago, thecigarbible said:

Ok thank you it worked! That is a shame we cannot target individual blogs. I guess I have to do some editing now heheh 😁

In fact, you can target each post. If you have less than 10 posts, it is possible. But if the blog has more than 10 posts ..... the code will be very very long.

Replace 

article.tag-camacho

with Page ID (Post ID same Page ID). See how to find Page ID. 

Then, if you want to hide title in 3 posts, use

@media screen and (max-width:640px) {
/* Hide title - gap on all blog posts */
pageid-1 h1.BlogItem-title, pageid-2 h1.BlogItem-title, pageid-3 h1.BlogItem-title {
    display: none;
}
}

8 hours ago, tuanphan said:

You can use CSS to resize images ... but it will be ugly.

/* Desktop */
@media screen and (min-width:991px) { CSS }
/* Tablet */
@media screen and (min-width:641px) and (max-width:990px) {CSS}
/* Mobile */
@media screen and (max-width:640px) { CSS }

 

What CSS would I need to add to change the image height?