Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
thecigarbible

How to change responsive images on Homepage only using Custom Css

Question

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;
}
}

 

Share this post


Link to post

16 answers to this question

Recommended Posts

  • 0
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.... 

Share this post


Link to post
  • 0
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 😎

Share this post


Link to post
  • 0
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?

Share this post


Link to post
  • 0
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 }

 

Share this post


Link to post
  • 0
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.

 

 

Screen Shot 2019-11-10 at 14.49.50.png

Share this post


Link to post
  • 0
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..

Screen Shot 2019-11-10 at 15.14.56.png

Can you share link to that page?

Share this post


Link to post
  • 0
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;
}
}

 

Share this post


Link to post
  • 0

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;
}
}

 

Share this post


Link to post
  • 0
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;
}
}

 

 

Share this post


Link to post
  • 0
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?

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...