-
Posts
-
Hi there I have created a banner using a color section and using an image as the background image. However when I tried to make it responsive for mobile and get the perfect sizing on mobile it became huge on desktop even when I had the settings for responsive. Ive tried a million different combinations and just cant get it right on both. On the live site I resorted to having 2 different banners one for mobile and one for desktop – but I can see both load when I go to the page so I dont want this as the final option. Can you please help. Im trying to acheive what Ive done with the 2 different versions on the one.
Live page where I have 2 different banners: https://gracegedeon.com/
Dev page where I am trying to just have the one banner but get the right sizing for mobile and desktop: https://gracegedeon.com/home-redesign-2025/
Hey xfacta,
Thank you for the inquiry.
The first section displays fine on our end. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:
1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.
Best regards,
Ismaelhi there please see screenshots of what I am talking about. the desktop is too large and the mobile is perfect. So not sure how to get it to look like the screenshot named “Grace_how I want the Desktop version to look” and the mobile version using the one color section (so be responsive in the way I want them to display). Instead of how the current live site where I have had to create 2 versions of the color section to get the right sizing for mobile and desktop display
Hi,
Thank you for the screenshot.
Try to add this css code to adjust the height of the color section desktop view.
/* Desktop Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */ @media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ .no-touch-device .av-minimum-height-44vw:not(.av-slideshow-section) .container { height: calc(100vh - 342px) !important; } }Result after adding the modification:
Best regards,
IsmaelOh awesome thank you! its still a bit too big – what do I need to change the adjust it a little bit more? the gold text isnt showing on my screen
Hi,
Try to increase the 342px value in the css rule above. This is the value being subtracted from the total height of the color section, which is the sum of the header height and the section below the first one.
height: calc(100vh - 342px) !important;Best regards,
IsmaelThank you. When I tried that on the test version it works but when I go to the live page and use the 44% responsive setting which is what gives me the exact size I want on mobile and try and adjust the height calc nothing changes on the Desktop view.
Also it seems to have created more of a gap now under the black color section that sits under the main banner and the text section under the black color section – how can I reduce that big gap on monile – looks fine on desktop.
Hi,
Try to set the minimum height of the color section to 44vw, then add the css code above.
Best regards,
IsmaelOk t hank you. The mobile sizing is perfect at 55% – so I just edited the code to 55vw to match that and it worked. thanks for your help.
However the gap the black color section that sits under the main banner and the text section under the black color section – how can I reduce that big gap on monile – looks fine on desktop. How can I fix that?
Hi,
Try adding this css code to adjust the padding of the black section.
/* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #top #main #av_section_2.avia-section .template-page { padding: 20px 0; } }Best regards,
IsmaelHi,
We are not seeing the big white gap. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox.
Best regards,
Ismael
- You must be logged in to reply to this topic.