Announcement

Collapse
No announcement yet.

where is responsive design elements css?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • where is responsive design elements css?

    The responsive design option video tutorial is several years old and the responsive options page has changed. Where can I find the css for the various responsive elements? The video shows them already visible on the screen when the show options is selected. There are a couple of elements that I need to changed, background color, etc. It is quite difficult to use the developement tools build into the browsers when you have made you screen size the size of a cell phone display. Any help would be appreciated.

  • #2
    I found out why I wasn't seeing the options on the responsive page. But I still do not know the names of the elements that can be styled. Is that info available anywhere?

    Comment


    • #3
      No, there is no list. Best way to identify elements and try new styles live is to learn how to use one the developer browser addons, like Firebug for Firefox or similar.
      Eric made a video back then - you´ll surely find newer ones on Youtube though.

      https://vimeo.com/29148033

      Comment


      • #4
        Thanks SiGa. I have used them and they are quite helpful. My problem now is a bit different. I have padded my primary menu 150px to the right in order to align it with my header. Now my responsive primary menu is also moved over 150px and I cannot figure out how to move it back to the left. I also don't really care for the lines but can live with those. Again any help is appreciated. My site is

        gracefellowshippca.dreamhosters.com

        Comment


        • #5
          When you introduce CSS like your padding, you´d have to either

          - undo the padding in the media query boxes in Dynamik Design - Responsive for the same element, using the same selector OR
          - just put all your styles that would only address big screens in a media query (Dynamik Custom - CSS or your skin CSS file)

          Would look like this:
          Code:
           @media only all and (min-width: 1140px) {  
          styles only for big screens here, including the padding for your menu:
          }
          I usually prefer the second solution because you don´t have to write things twice (CSS/undo CSS).
          Last edited by SiGa; 11-10-2016, 04:33 PM.

          Comment


          • #6
            FIXED!!!! Thanks so much. That was really puzzling me. The responsive settings are the last thing I am working on. Maybe I should reverse my order. LOL. Thanks again.
            Last edited by SiGa; 11-10-2016, 04:33 PM.

            Comment


            • SiGa
              SiGa commented
              Editing a comment
              You´re welcome. Forgot to add: 1140px is default width, if you changed the widths in Dynamik Design - Widths, change the media query accordingly.
          Working...
          X