Make Calendar Popup Larger?

[DataCobalt]

Hi all,

 

I am using the code to make a datapage more responsive, and while it works wonderfully, I don't know how to make the calendar popup larger to be usable on mobile.

 

 

When I click on the calendar it shows up but it is way to small to be mobile friendly.

 

Below is what I have for the responsive code.

 

I've been searching styles to try and find out how to change the popup but have been unsuccessful.

 

Any and all help is much appreciated!

<!-- Responsive Code Begin -->
<style>
/* Change max-width to what size you want the form to change at */
@media (max-width: 767px) {
  


  #datapage-form table { width: 100% !important; margin-top: 1px !important;  }
  #datapage-form td { display: block; }

  img[alt~="Calendar"] {
    position: relative; top: -5px;
  }

 
}
</style>
<div id="datapage-form" >
<!-- Responsive Code End --> 

[aam82]

div#CalendarToolBox {

  width: 240px!important;

}

 

#CalendarToolBox .BodyTable td div {

  font-size: 18px;

}

[DataCobalt]

That worked perfectly, I think I can just edit the header element to have the top navigation in the calendar get larger as well.

 

Thank you!

[aam82]

just add font-size to the first selector to adjust that.

[DataCobalt]

just add font-size to the first selector to adjust that.

Actually I had tried that and it only edits the text at the bottom (todays date) and not the header text.

[aam82]

table.NavBar tbody td {
font-size: 18px!important;
}

#CalendarToolBox > div > table.NavBar > tbody > tr > td:nth-child(7) {
  width: 55px!important;
}

The second part adjusts the width of the year column, which by default is at 30px, but becomes too small if the font size is increased too much. 

[RuisiHansamu]

Hey there, you may also want to check this similar forum thread that uses style customization. Also, there is a new video, I believe it is a livestream recording about CSS and HTML. Feel free to check it out here: 

 

 Cheers! 

[IamNatoyThatLovesYou]

Hello Everyone, just sharing another forum that you may check out that provides codes that enlarge the pop-up calendar.