Jump to content

How to change responsive images on Homepage only using Custom Css

Recommended Posts

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

 

Link to comment
  • Replies 16
  • Created
  • Last Reply
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 😎

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.