DEV Community: w3codemaster

CSS tips for LTR & RTL support

w3codemaster — Sun, 25 Jan 2026 11:48:34 +0000

CSS tips for LTR & RTL support

Use logical margins instead of left/right

margin-inline-start: 16px; margin-inline-end: 16px;

Prefer logical properties.

Use text-align: start and end text-align: end;

→ left in LTR, right in RTL.

Use logical positioning instead of left/right

Avoid left and right in position:absolute

inset-inline-start: 10px;

Set direction at the root

html { direction: ltr;} html[dir="rtl"] {direction: rtl;}

Use :dir() selector when needed

:dir(rtl) .icon { transform: scaleX(-1);}
Padding should also be logical

padding-inline-start: 12px; padding-inline-end: 12px;

Fallback for older browsers (optional)

margin-left: 16px; margin-inline-start: 16px;

Logical property overrides where supported.

Common Screen Resolutions for Responsive Design in 2024

w3codemaster — Fri, 26 Jul 2024 14:17:14 +0000

Responsive design is essential in 2024 as users access websites and applications on a wide range of devices, from smartphones and tablets to laptops and desktops. To ensure an optimal user experience, it's crucial to consider various screen resolutions during the design and development process. Here are some of the most common screen resolutions to consider for responsive design in 2024:

Mobile Devices Mobile devices, including smartphones and small tablets, are a significant segment of the market. Key resolutions include:

360x640 (HD): A standard resolution for many Android devices, this resolution is often used for entry-level smartphones and some mid-range devices.
375x667 (iPhone 8): Widely used by iPhone users, this resolution represents a significant portion of the mobile market.
414x896 (iPhone XR, 11, 12, 13): A popular resolution for newer iPhone models, offering a larger display area.
480x854 (WVGA): Common on some older or budget Android devices.

Tablets Tablets offer larger screens than smartphones, often used for browsing, reading, and media consumption. Important resolutions include:

768x1024 (iPad): A standard resolution for older iPads and some other tablets.
800x1280 (WXGA): Commonly found on many Android tablets.
834x1112 (iPad Pro 10.5-inch): A popular resolution for Apple's iPad Pro series, providing ample screen space for productivity tasks.

Laptops Laptops vary widely in screen size and resolution. Common resolutions include:

1366x768 (HD): A standard resolution for many budget and mid-range laptops.
1920x1080 (Full HD): The most popular resolution for modern laptops, providing a balance of clarity and performance.
2560x1600 (WQXGA): Found on higher-end laptops and MacBook models, offering sharper images and more screen real estate.

Desktops Desktop monitors offer the most significant variation in screen sizes and resolutions. Key resolutions include:

1920x1080 (Full HD): A standard for most desktop monitors, suitable for everyday use.
2560x1440 (QHD): Offers greater clarity and is popular among professionals and gamers.
3840x2160 (4K UHD): Becoming increasingly common, 4K resolution provides exceptional clarity and is ideal for creative professionals and high-end gaming.

Ultra-Wide Screens and Special Formats Ultra-wide and curved screens are gaining popularity for immersive experiences and enhanced productivity:

3440x1440 (Ultra-Wide QHD): Offers an expansive view, popular for multitasking and gaming.
5120x1440 (Dual QHD): Provides even more screen real estate, ideal for professionals who need multiple applications open simultaneously.
Design Considerations
Fluid Layouts: Use fluid layouts that adapt to different screen sizes, ensuring a seamless experience across devices.
Breakpoints: Define breakpoints at common resolutions to adjust the layout, navigation, and content presentation. Typical breakpoints include 320px, 768px, 1024px, and 1440px.
Responsive Images: Use responsive images that adjust to different screen resolutions, ensuring quick load times and high-quality visuals.

Mobile-First Approach: Start designing for mobile devices and scale up to larger screens, ensuring a robust and accessible experience for all users.

In 2024, designing with these common screen resolutions in mind ensures your website or application provides a great user experience, regardless of the device used. Responsive design is crucial in reaching and engaging a diverse audience, making it a fundamental aspect of modern web development.

how to insert space in html ?

w3codemaster — Tue, 03 Dec 2019 03:24:55 +0000

some HTML space tag

The HTML "br" tag denotes a line break, like a carriage return in a word processing program. You’d use it at the end of each line of an address, for example, to get the block format people are accustomed to seeing.

The "p" tag generates a paragraph break. It is applied to a section of text that is a block of text separated from nearby blocks of text by a blank space and/or first-line indent.

The "pre" tag is used with preformatted text. It instructs the browser that the text is to appear exactly as written in the HTML file including any spaces or blank lines. If you type five spaces inside "pre" tags you get five spaces on the website.character

The "nbsp" character creates a space that does not break into a new line. Two words that are separated by a non-breaking space always appear on the same line.

a live example is here

HTML insert space

Zebra Datepicker

w3codemaster — Sun, 01 Dec 2019 06:05:32 +0000

Sometimes we face width issues in the zebra date picker. for that, I use little CSS.

/* just add this css in your css */
span.Zebra_DatePicker_Icon_Wrapper {
display: block!important;
width: 100%!important;
position: relative!important;
}

a live example is here
zebra datepicker

Bootstrap 4 Float Right

w3codemaster — Sun, 01 Dec 2019 05:50:43 +0000

Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any css. tf games

A live example is here https://w3codemasters.in/bootstrap-4-float-right/