TomBatch

Yeah, I did try that and it does work on the blog list page, however not so great on individual blog pages. I would prefer to keep Ajax loading on as I have some pretty large blog posts. Is there a work around with this?

Thanks again 🙂

Sorry about this. So for me it does work after I have refreshed it about 3 times. Any idea why this is?

Thanks so much for your response. However, it doesn't seem to work. The link is still as it was. 

To be honest there is only one author. So I will change it shortly so all the blogs are written by 'Tom Saxon - Coffee Expert'. 

I would then like the link to go to: https://www.batchcoffee.co.uk/tom-saxon-coffee-expert

instead of: https://www.batchcoffee.co.uk/stories#:~:text=Tom Saxon - Coffee Expert

Hey @tuanphan I would love this on my site, but I am struggling to find the code too.

I would love the Author link to link back to https://www.batchcoffee.co.uk/tom-saxon-coffee-expert

Here is my site and blog:

https://www.batchcoffee.co.uk/stories

THanks :)

Tom.

Managed to sort it with this code 🙂

Thanks though mate.

@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1666910696019_17181 .content-fill {
    padding-bottom: 50% !important;
}
}

You absolute genius!!! Thanks so much. Worked a treat 🙂

Cheers Ziggy. My template doesn't have the option of background images. I'm sure this is a problem that many people must face. I would have assumed there would be an easy fix. Surely not everyone wants the same size image on desktop to mobile. 

Hey Tuan, Any update on this? 🙂

Hey Tuan, 

I don't really want to leave the homepage like this for too long. Here are screenshots of what it looks though. 

Hey Tuan, 

Ok. I will leave it there for an hour. It just looks a mess that is why I have taken it down. Hopefully you are able to see it now. 🙂

Hey Tuan, 

No that doesn't do what I want. It just moves the text down and creates a large white area under the image.

I've tried a few other snippets of CSS, but I'm really struggling with this one. 

Any other suggestions?

Hey Ziggy,

I hope you are well?

I'm still trying to find a solution for this if you have one?

At the moment I'm happy with how the image looks on mobile, however I would like the ratio on desktop to be 2:1.

🙂

Hey! 

It's the first image on the homepage. I basically want it to stay as it is now for mobile. But for desktop I want it as a 2:1 ratio. 🙂

No. It didn't do anything. I altered the image by making it shorter in edit.

Hey Ziggy! 

Thanks for getting back to this. 

So I want the desktop image to look how it looks now (I just changed it). But the mobile image to be the full image. I basically want the desktop to be cropped from the top and bottom. 

🙂

I am trying to resize the first image you see on my homepage on desktop. I have used CSS to alter the size of the text and button on mobile and I'm happy with how that looks now but I want the desktop image to have a ratio of 2:1 without stretching the image, just cutting off the top and bottom. 

www.batchcoffee.co.uk

Thanks in advance guys 🙂

It's batchcoffee.co.uk

Hey Folks, 

I have managed to adjust the text and button size on my homepage image. But I now want to adjust the image size on desktop to the same image but a ratio or 2:1. Can you help please 🙂

Thank you so much!

Topman.

This is what I have so far:

#block-yui_3_17_2_1_1666941010634_110861 
{margin-top:-40px; 
margin-right: -17px; 
margin-bottom:-40px; 
z-index:99;}
#block-yui_3_17_2_1_1666941010634_113072 
{margin-top:-40px; 
margin-left: -17px; 
margin-bottom:-40px; 
z-index:99;}

Thanks mate. 

Just to confirm. what goes in here //in this line//?

And is this in CSS or in the header of the page?

Hey Folks, 

I am trying to make two images on my homepage appear as one image. 'As seen on feature'. 

So that in mobile they stack. 

I have added some custom CSS code to change the padding to -20px on the left and right side of the two images. But then in mobile view the whole padding of screen is out and makes the page bigger than the screen. 

Any ideas how I adjust the left and right padding on desktop and then top and bottom on mobile?

Here is the page - https://www.batchcoffee.co.uk/home-1

Thanks in advance 🙂

Ziggy! Absolute hero. All works great. 

Thanks mate. 

This is what I have as so far:

@font-face {   
font-family: 'SuisseIntl-Bold';   
src: url(https://static1.squarespace.com/static/5d9633b6cd5e945f60815067/t/6357fb45a1061a1d0112278a/1666710342121/SuisseIntl-Bold+%281%29.otfURL.ttf/.otf), url(https://static1.squarespace.com/static/5d9633b6cd5e945f60815067/t/6357fb45a1061a1d0112278a/1666710342121/SuisseIntl-Bold+%281%29.otfURL.woff), url(https://static1.squarespace.com/static/5d9633b6cd5e945f60815067/t/6357fb45a1061a1d0112278a/1666710342121/SuisseIntl-Bold+%281%29.otfURL.woff2);}
h3 {font-family: 'SuisseIntl-Bold';}
h2 {font-family: 'SuisseIntl-Bold' !important;}
h1 {font-family: 'SuisseIntl-Bold'!important;}
header#header * {font-family: 'SuisseIntl-Bold';}
.subnav a {
   color:dimgrey !important;
}
a.nav-item-page {font-family: 'SuisseIntl-Bold';}
a.nav-item-page {
   color:dimgrey !important;
}
.BlogItem-title {
font-family: 'SuisseIntl-Bold';}