Different varieties of responsive calendars with built-in memos for various device displays

Question

Different varieties of responsive calendars with built-in memos for various device displays

I developed a responsive calendar with memos for each day. Everything seems to be working fine, but only on two different screen resolutions. When viewing it on my small monitor with the resolution of 1024x768, it displays like this:

https://i.sstatic.net/18HPA.png

However, when I adjust the screen size to that of a smartphone, it looks like this:

https://i.sstatic.net/DxLP1.png

But, when I try to set a different resolution, everything gets messed up and looks like this:

https://i.sstatic.net/V2vz5.png

I have created a fiddle for you to test how it works:

https://jsfiddle.net/skyr9999/fgmyy0xh/

Here's the HTML code:

<div class="result">
    (calendar content here)
</div>

and the CSS code:

(CSS styling here)

How can I fix these issues? I want the calendar to display in two columns on medium-sized screens, similar to one of the following layouts:

Sun     Mon
Tue     Wed
Thu     Fri
    Sat

or

Sun     Mon     Tue
Wed     Thu     Fri
        Sat

Update 1

I also noticed double borders between cells. How can I remove them? I tried using border-collapse: collapse; but it didn't work.

javascript jquery html css responsive-design

Answer 1

Answer №1

I always manage to find solutions to my problems. Check out the updated fiddle here - https://jsfiddle.net/skyr9999/q78qeuh6/

Here is the HTML code:

<div class="result">
<!-- Code snippet for Sunday to Saturday with some dummy data -->
</div>

and the corresponding CSS code:

.result{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
    border-collapse: collapse;
}

/* Additional CSS rules for responsive design and styling */

/* Media queries for various screen widths */
@media all and (max-width: 370px) {
    /* Rules for smaller screen sizes */
}

@media all and (min-width: 370px) and (max-width:539px) {
    /* Rules for medium-sized screens */
}

@media all and (min-width: 540px) and (max-width: 720px) {
    /* More specific rules for larger screens */
}

...

/* General styles for cells and headers */
.flexcell
{
    /* Styling for each cell */
}

.flexmemo_descr
{
    /* Description styles */
}

.flexmemo
{
    /* Memo styling */
}

.emptyflex {
    /* Empty cell style */
}

The design is optimized for different screen resolutions, ensuring proper display across a range of devices. The mobile view includes special styles for full description visibility.

To address issues like double frames in cells, negative margins are used strategically. The layout is tested for responsiveness using FireFox Adaptive Design Mode.

You can preview how the page looks in mobile mode here.

Answer 2

I always manage to find solutions to my problems. Check out the updated fiddle here - https://jsfiddle.net/skyr9999/q78qeuh6/

Here is the HTML code:

<div class="result">
<!-- Code snippet for Sunday to Saturday with some dummy data -->
</div>

and the corresponding CSS code:

.result{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
    border-collapse: collapse;
}

/* Additional CSS rules for responsive design and styling */

/* Media queries for various screen widths */
@media all and (max-width: 370px) {
    /* Rules for smaller screen sizes */
}

@media all and (min-width: 370px) and (max-width:539px) {
    /* Rules for medium-sized screens */
}

@media all and (min-width: 540px) and (max-width: 720px) {
    /* More specific rules for larger screens */
}

...

/* General styles for cells and headers */
.flexcell
{
    /* Styling for each cell */
}

.flexmemo_descr
{
    /* Description styles */
}

.flexmemo
{
    /* Memo styling */
}

.emptyflex {
    /* Empty cell style */
}

The design is optimized for different screen resolutions, ensuring proper display across a range of devices. The mobile view includes special styles for full description visibility.

To address issues like double frames in cells, negative margins are used strategically. The layout is tested for responsiveness using FireFox Adaptive Design Mode.

You can preview how the page looks in mobile mode here.

Different varieties of responsive calendars with built-in memos for various device displays

Update 1

Answer №1

Similar questions

Try incorporating the <code> tags or a similar method in ReactJS when using JSX

I'm attempting to integrate the map function into my React Redux application, but after implementing useDispatch, I'm encountering an error message in the console

jQuery AJAX Concurrent Event

The elements within the HTML, CSS, and Bootstrap are all clashing and

What is the most effective way to alphabetically organize a Javascript array?

Issue with Retrieving the Correct Element ID in a Loop with JavaScript Function

Utilizing Angular JS to Manage Controller Events

The functionality of Angular 2 md-radio buttons in reactive forms seems to be hindering the display of md-inputs

The use of "Undefined in res.redirect" is a common issue that may arise when working with a combination of libraries such as

Utilizing CSS pseudo-elements in selectors with Scrapy

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Displaying a DIV inside an embedded DIV when selecting an option in HTML by utilizing JavaScript

Checking the alignment of a label or element in the center of a webpage using javascript

Achieving equal height for the englobing/parent div and the inner divs

JavaScript String Splitting with Regular Expressions

Need jQuery solution for changing CSS in numerous locations upon hover

Failed to build development environment: Unable to assign the attribute 'fileSystem' to a null value

In the Android Chrome browser, the settings of the meta viewport attribute do not take effect when the device is in full screen mode

Sophisticated CSS design featuring a heart-shaped cutout from the background

Steering clear of repeating evaluations and dynamically unloading objects requested with `require` is important