Return to previous page

Achieving Consistent Aspect Ratio in Responsive Web Design Across Different Screen Sizes

This topic has 8 replies, 4 voices, and was last updated 3 months, 4 weeks ago ago by Andrew Mitchell

Dylan

Participant

August 23, 2024 at 13:32

After finalizing the layout of my webpage, I’ve noticed that when testing on actual devices, the layout adjusts automatically with changes in the screen size. For instance, the hero banner displays the image in full when viewed on a smaller window, but as the window expands, the image scales up as well, causing some parts to be obscured. I’ve observed that other websites maintain a consistent aspect ratio for their content, including text, which scales down proportionally when the window is reduced in size. How can I achieve a similar responsive design that ensures content proportions remain consistent regardless of the screen size?

#411348 Copied Theme version: 9.3.17

7 Answers

Rose Tyler

Support staff

August 23, 2024 at 14:36

Hello Dylan,

Thank you for reaching out to us.

Could you please provide temporary wp-admin access? We need to check your settings.

To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

Best Regards,
8Theme’s Team

#411363 Copied

Dylan

Participant

August 23, 2024 at 21:40

okay

Please contact administrator
for this information.

#411415 Copied

Dylan

Participant

August 23, 2024 at 21:48

Also, please help me check whether the “marquee” component is normal. It always has text overlapping problems when displayed on mobile devices.

#411416 Copied

Rose Tyler

Support staff

August 24, 2024 at 08:26

Hello Dylan,

We appreciate your prompt response.

1/ We understand your concern about maintaining a consistent aspect ratio for your content across different devices and screen sizes.

To achieve a responsive design that ensures content proportions remain consistent, you can use these settings – to apply different styles based on the screen size https://prnt.sc/LL3SxSoxFKVf https://prnt.sc/o0a0ha2-qw8L .
Additionally, setting your images and other elements with relative units like percentages, vw (viewport width), or vh (viewport height) instead of fixed units like pixels can help maintain the aspect ratio.
For text scaling, consider using the ‘viewport units’ for font sizes, such as vw, vh, vmin, or vmax, which are relative to the size of the viewport. This approach allows the text size to adjust based on the screen size, helping to keep the text legible and proportionate on different devices.

2/ This is the default behavior of the marquee widget, you can hide some texts for mobile using a custom CSS class – https://prnt.sc/2pvOT_-nFKpe
However, you are welcome to submit a suggestion for its improvement through our task board at https://www.8theme.com/taskboard/ . Should your suggestion receive significant support from other customers, our development team will consider it for potential inclusion in future updates.

Best Regards,
8Theme’s Team

#411440 Copied

Dylan

Participant

August 24, 2024 at 15:21

Thank you very much; the methods you provided have been quite effective. I’ve set the font size in viewport width units (vw), but I’m still unsure about configuring the marquee component, especially for mobile display. There are two main issues I’m facing:

On mobile devices, there’s a significant overlap of text, with some text scrolling at a very fast pace, while others are much slower.
I’m unable to set a gap between each piece of text; they all seem to be connected without any separation.
Could you please guide me on how to resolve these issues using CSS? Alternatively, if you could access the backend to make the necessary adjustments, kindly inform me of the specific sections to review.

#411478 Copied

Jack Richardson

Support staff

August 26, 2024 at 08:51

Dear @Dylan,

We hope this message finds you well. We are pleased to inform you that we have implemented a ‘Carousel Anything’ widget specifically for mobile devices on your website. You can review the changes by visiting your website.

Additionally, we have uploaded a video demonstration in the private area of your site for your reference.

Please note that we encountered challenges in optimizing the Marquee widget for mobile devices. Consequently, we have opted for an alternative solution to ensure a seamless display on mobile platforms. We invite you to check these updates at your earliest convenience.

Thank you for your attention. Should you have any questions or require further assistance, please do not hesitate to contact us.

Best Regards,
Jack Richardson
The 8Theme Team

Please contact administrator
for this information.

#411609 Copied

Andrew Mitchell

Support staff

August 28, 2024 at 08:40

Dear Dylan,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#411934 Copied
Tagged: best selling, consistent aspect ratio, different screen sizes, responsive web design, web design techniques, woocommerce themes
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Achieving Consistent Aspect Ratio in Responsive Web Design Across Different Screen Sizes’' has been successfully resolved, and the topic is now closed for further responses

Achieving Consistent Aspect Ratio in Responsive Web Design Across Different Screen Sizes

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection