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

Banner Image Won't Resize for Mobile View

Recommended Posts

9 hours ago, RAD_Design said:

Hi guys, having a similar issue here as the other posters... All banners are scaling properly on my site in mobile, except for one! 

I've read through a million articles and posts on here, played with code and am still having trouble. Would anyone be able to have a look for me and see where I'm going wrong!? I just don't have the tech abilities to understand it.

URLs is: https://gopher-mackerel-pen5.squarespace.com/contact
PW: HIP2020!

There is a lot of code in the Custom CSS panel from previous designer building it, not mine btw. 

Thanks in advance!

Jay.

 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Hi everyone, 

I'm having a similar issue, but the rotating banner image on main page is covering up some of the text on mobile.  I see the codes given, but where exactly do I insert that into the CSS?  Or is that being generated for each individual site? 

Any help is appreciated.  Our President just brought this to my attention.  

www.AltClaim.com

Share this post


Link to post
11 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

 

Amazing, thankyou @tuanphan for your help! Sorted.

 

RAD.

Share this post


Link to post
Posted (edited)

Unfortunately, that didn't work for me, it made the image small in the center on desktop and no change on mobile.

Edited by Melissa_FL

Share this post


Link to post
On 4/22/2020 at 6:06 AM, Melissa_FL said:

Hi everyone, 

I'm having a similar issue, but the rotating banner image on main page is covering up some of the text on mobile.  I see the codes given, but where exactly do I insert that into the CSS?  Or is that being generated for each individual site? 

Any help is appreciated.  Our President just brought this to my attention.  

www.AltClaim.com

Have you solved yet?

On 4/28/2020 at 5:42 AM, Ahora said:

Which image? Homepage or..?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
Posted (edited)

Hi @tuanphan I'm having a similar issue to those above, where I want my banner image to crop for mobile on both the home page and each of the 'Product' pages. 

1745566990_ScreenShot2020-05-14at14_56_09.thumb.png.f709acb14901d3a299233f1970e4a00f.png

 The banner looks fine on the desktop with the whole image, but doesn't adapt to mobile:

image.thumb.png.cb712c4698adae99de124f100ccd9d4e.png

Is this something that can be fixed, and on our multiple product pages? Thanks in advance!

https://www.technologydeskingtradingdesks.com/

Edited by KrisJWhite
Insert Hyperlink

Share this post


Link to post
12 hours ago, KrisJWhite said:

Hi @tuanphan I'm having a similar issue to those above, where I want my banner image to crop for mobile on both the home page and each of the 'P

 

Is this something that can be fixed, and on our multiple product pages? Thanks in advance!

https://www.technologydeskingtradingdesks.com/

Add to Home > Design > Cusotm CSS

@media screen and (max-width:640px) {
.homepage {
  .Parallax-item img {
      width: 100% !important;
      left: 0 !important;
      height: auto !important;
      top: 0 !important;
  }			
	section#intro-image {
   	 height: 200px;
	}
  div#page-5bfe89c2032be4ebc6075bef .spacer-block {
      display: none;
  }
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Thanks for that @tuanphan, the homepage looks great!

If I wanted to use this across all of my product page banners throughout the site, would it be best to copy this formula and adapt to each page, or is there a way to apply this it to every page more easily?

Thanks!

Share this post


Link to post
Posted (edited)

Hi @tuanphan I just stumbled on this today been trying to also fix this problem on my website. I was hoping if you could also please help me out on this as well. The homepage banner will not change resolution when I change it to mobile view. 

My website is kreativms.com https://www.kreativms.com/

Thank you! 

Edited by KreativMS

Share this post


Link to post
12 hours ago, KreativMS said:

Hi @tuanphan I just stumbled on this today been trying to also fix this problem on my website. I was hoping if you could also please help me out on this as well. The homepage banner will not change resolution when I change it to mobile view. 

My website is kreativms.com https://www.kreativms.com/

Thank you! 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

I am also having an issue getting my sliding image gallery to resize properly on mobile. I tried the first CSS code but pretty sure that is specifically for background images. What would I tweak to fix mine? 

The website is www.Vincereteam.com

Share this post


Link to post
9 hours ago, igotbadnewz said:

Looking for the same solution. Index banner image on homepage does not resize for mobile. Any help is appreciated.

Link to the page 

https://www.foragedsounds.com

Thanks in advance!

For future members

Add to Home > design > Custom CSS

@media screen and (max-width:640px) {
.homepage section#landing {
    height: 250px;
}
#landing img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Hi There,

I have tried about 5 CSS codes and none of them have worked. I am trying to use a slider for banner on the bedford template 7.0. 

The desktop view is great but the mobile is terrible. www.ahampremayoga.co

Any help would be so greatly appreciated! Thankyou :)

Screen Shot 2020-05-26 at 1.06.39 pm.png

Screen Shot 2020-05-26 at 1.06.25 pm.png

Share this post


Link to post
On 5/26/2020 at 3:07 PM, chambcou said:

Hi There,

I have tried about 5 CSS codes and none of them have worked. I am trying to use a slider for banner on the bedford template 7.0. 

The desktop view is great but the mobile is terrible. www.ahampremayoga.co

Any help would be so greatly appreciated! Thankyou :)

 

Can you share link to page in screenshot?

19 hours ago, womanatcana said:

are those having this similar problem because of the native template that stretches the first picture?

Can you share link to page in your question?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Hi friends,

I am also having difficulties with this, my banner image is not properly resizing for mobile.

moderncourage.com

Warm regards,

 

Jess

Share this post


Link to post

Hi Tuanpan,

It's happening on two pages, my initial cover (enter) page, as well as my /home page. I've included both screenshots and what they look like on mobile.

678274797_ScreenShot2020-05-30at7_32_07AM.thumb.png.4c78f68a1766cad33f0788f2da161f48.png774425535_ScreenShot2020-05-30at7_32_28AM.png.a9cfbca0896219821d71387882950cfc.png

 

878948837_ScreenShot2020-05-30at7_28_51AM.png.20f74e819f7b70b21238f917c8f55b21.png552071402_ScreenShot2020-05-30at7_28_29AM.thumb.png.7f7c48e8c459ed4d07c9c51f06753295.png

Share this post


Link to post
17 hours ago, JessicaRita said:

Hi Tuanpan,

It's happening on two pages, my initial cover (enter) page, as well as my /home page. I've included both screenshots and what they look like on mobile.

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
section#jessicarita figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#jessicarita {
    min-height: 30vh !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
On 5/29/2020 at 10:39 PM, tuanphan said:

Which image? Can you take a screenshot?

 

7 hours ago, tuanphan said:

Add to Home > design > Custom CSS


@media screen and (max-width:767px) {
section#jessicarita figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#jessicarita {
    min-height: 30vh !important;
}
}

 

Hi there,

 

Thank you so much for this! It only seems to work on my /home page, and not my initial cover page located at www.moderncourage.com

 

Any thoughts?

 

-Jessica

Share this post


Link to post

Hi All,

Having the same issue with the mobile view.

 I have also placed the tool bar inside the mirror of the background image which I would like to keep static but it seems to move when on a different size screen - how do I stop this from happening ? pls help!

https://www.lellasoper.com

1763273158_Screenshot2020-06-01at16_39_58.thumb.png.3d8d4294ce7a2eca891d8b6dc92d43fe.png

 

 

Screenshot 2020-06-01 at 16.39.58.png

IMG_4963.jpg

Share this post


Link to post
On 5/31/2020 at 10:19 PM, JessicaRita said:

 

 

With cover page, use

@media screen and (max-width:767px) {
body#collection-5eada79435a4926fb71d5741 section.Intro.Intro--has-image figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
body#collection-5eada79435a4926fb71d5741 section.Intro.Intro--has-image {
    min-height: 30vh !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
On 6/1/2020 at 10:46 PM, Lsoper said:

Hi All,

Having the same issue with the mobile view.

 I have also placed the tool bar inside the mirror of the background image which I would like to keep static but it seems to move when on a different size screen - how do I stop this from happening ? pls help!

https://www.lellasoper.com

@media screen and (max-width:767px) {
.homepage section:first-child {
    min-height: 30vh !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

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