Change CSS in Mobile View

  • Unknown's avatar
    sophietheenergizerbunny · Member ·

    I would like to change the “What We Do” page on the mobile view so that the text appears brown and so that the space is reduced when the columns collapse (there is a spacer in place so that “Rescue” and “Restore” align on the desktop view but it is changing how it appears on mobile. Can anyone help with this? The theme is Tesseract.

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the nature of that image I think is going to be quite an issue. When I look at that page on mobile sized I can’t read any of the first text widget due to the lightness of the image. I can take all the text to brown on smaller screens, but then due to the parallax effect where the image scrolls up faster than the content, the brown text becomes nearly impossible to read on the second widget.

    This would be one suggested solution for the first section, which, as part of the solution, adds a translucent background to the two sections to make all the text readable. 

    @media screen and (max-width: 768px) {
  .panel-grid #pgc-569-0-0 .whatwedo {
    color: #884400 !important;
  }
  #pgc-569-0-0.panel-grid-cell, #pgc-569-0-1.panel-grid-cell {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px !important;
    margin-bottom: 0 !important;
  }
}
@media screen and (max-width: 400px) {
  .panel-widget-style {
    padding-top: 0 !important;
  }
}

    Also, when you add inline styles, such as you have done with those widgets, it makes it more difficult to override and style them with media queries. What I would suggest would be adding unique CSS classes and then creating the CSS rules in your custom CSS to take care of the styling.

  • The topic ‘Change CSS in Mobile View’ is closed to new replies.