Aspire Update Issues 1.1.2 with responsiveness

Homepage › Community Forums › Aspire Theme Support › Aspire Update Issues 1.1.2 with responsiveness

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 17, 2016 at 4:44 pm #18767
    caroline
    Customer

      I installed Aspire update Version 1.1.2 today. Previously the following changes to CSS corrected issues with background images displaying incorrectly on IPAD and IPhone.
      }
      .front-page-1,
      .front-page-4,
      .front-page-5,
      .front-page-7,
      .front-page-9,
      .front-page-12 {
      /*background-attachment: fixed;*/
      background-position: 50% 0;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      }
      The Aspire 1.1.2 update revises CSS in this area to the following:
      @media only screen and (max-width: 1800px) {

      .front-page-1,
      .front-page-4,
      .front-page-5,
      .front-page-7,
      .front-page-9,
      .front-page-12 {
      -webkit-background-size: auto;
      -moz-background-size: auto;
      background-size: auto;
      }

      This creates issues with homepage background photos not fully covering the screen, however if I change back to the previous CSS code that worked prior to the update, the home page elements no longer resize on mobile devices.

      What is the correct CSS code to use in version 1.1.2 Aspire to ensure Home Page images remain flush to the edges and still resize correctly on mobile devices. I am testing on 27”desktop, IPAD mini and IPHONE.

      http://bit.ly/29T5ER1

      Thank you,

      July 17, 2016 at 4:45 pm #18768
      caroline
      Customer

        Wes,
        Thank you in advance for replying to this message.

        July 17, 2016 at 8:41 pm #18771
        Wes
        Moderator

          Yes remove the code under – @media only screen and (max-width: 1800px) since this is removed in the new version (coming soon). You can check out the demo to see that the images show up in full width now.

          After you do that, look on line 1504 and make sure the code looks like this –

          .front-page-1,
.front-page-4,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-12 {
	/*background-attachment: fixed;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

          I am still doing tests to get it to be full width AND work on mobile devices, so there may be some minor changes added later.

          July 17, 2016 at 9:02 pm #18772
          caroline
          Customer

            Thank you, Wes. I made the changes and it works like a charm! I tested on various devices. I really appreciate this!

            July 17, 2016 at 9:21 pm #18773
            Wes
            Moderator

              Awesome! Glad it’s working!

              Thanks for letting me know.

            • Author
              Posts
            Viewing 5 posts - 1 through 5 (of 5 total)
            • The topic ‘Aspire Update Issues 1.1.2 with responsiveness’ is closed to new replies.