WordPress.org

Ready to get started?Download WordPress

Forums

Appointments
Appointments mobile view not working correctly when switching theme (4 posts)

  1. Xonwi
    Member
    Posted 1 month ago #

    Hello,

    When I was working with the theme travelfy I inserted this code to make the mobile view look great:

    @media only screen
    and (min-device-width : 100px)
    and (max-device-width : 568px)
    and (orientation : portrait) {
        table.appointments-legend-table td{
             float: left !important;
             margin-bottom: 15px !important;
         }
    
    	.appointments-confirmation-wrapper fieldset{
    	padding-left: 3px !important;
    	width: auto;
    	}
    
    	.appointments-confirmation-wrapper fieldset div{
    	width: 95% !important;
    	}
    
    	.appointments-confirmation-wrapper span{
    	width: 60%;
    	}
    }

    However, when I switched to the theme gopress and inserted this code to the style.css, it did not look good at all.

    The appointments-plugin can be seen at site.

    Thanks in advance!

    https://wordpress.org/plugins/appointments/

  2. WPMU DEV
    Member
    Posted 1 month ago #

    Hi @Xonwi,

    Thanks for posting on the forums.

    I checked your site and found you have commented the added CSS code in your wpex-gopress-child theme as following.

    /*@media only screen
    and (min-device-width : 100px)
    and (max-device-width : 568px)
    and (orientation : portrait) {
        table.appointments-legend-table td{
             float: left !important;
             margin-bottom: 15px !important;
         }
    
    	.appointments-confirmation-wrapper fieldset{
    	padding-left: 3px !important;
    	width: auto !important;
    	}
    
    	.appointments-confirmation-wrapper fieldset div{
    	width: 80% !important;
    	}
    
    	.appointments-confirmation-wrapper span{
    	width: 50% !important;
    	}
    }*/

    Could you please uncomment it to see how it's working for you?

    Kind Regards,
    WPMU DEV

  3. Xonwi
    Member
    Posted 1 month ago #

    Hi @WPMU DEV,

    I commented the code to see if something changes with it commented out. Sadly it looks exactly the same..

    Now the code is no longer commented for you to see the effects.

    Thanks for your help I really appreciate it!

  4. WPMU DEV
    Member
    Posted 1 month ago #

    Hi @Xonwi,

    Thank you for your reply.

    It seems this is a theme CSS conflict issue.

    To resolve this issue could you please try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin?

    http://wordpress.org/plugins/simple-custom-css

    @media screen and (max-width: 768px){
      #content table {
          max-width: 420px;
      }
    }

    Best Regards,
    WPMU DEV

Reply

You must log in to post.

About this Plugin

About this Topic