Announcement

Collapse
No announcement yet.

something wrong with my CSS for responsive....

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

  • something wrong with my CSS for responsive....

    I have everything working right on my responsive template but the phone number and time is not adjusting to mobile. I've been burning my brain trying to figure this out but I cant pin point it.
    I've uploaded the image on what I am trying to accomplish. I need help trying to figure out whats going on.
    Thanks in advance guys.
    -Jay

  • #2
    ID "FOWNDTXT" (the block that has your phone number) is positioned on the right side of your page by adding a margin left of 530px. So when the page shrinks down to a width below 530, that element is being pushed off to the right.

    You should actually position "FOWNDTXT" with a "float: right;" when in desktop css, and then a "float:none;" in your responsive mobile css.

    As a side note if you use chrome hitting "Command Option i" will bring up an inspector so you can see whats going on on your page, and see which elements are having what styles applied to them, and from where.

    Comment


    • #3
      NMTEACO Okay, the float right i know i got... How would I do it on mobile?

      Comment


      • #4
        In CSS you can apply different styles to elements based on width of the screen.

        Code:
        #FOWNDTXT {
            float:right;  
            font-size: 16px;
        }
        
        @media (max-width: 600px) {
        
        #FOWNDTXT {
            float: none;
        }
        
        }
        With the above code #FOWNDTXT will have no margin and float right. Then when the screen is less then 600px wide the float will go away.

        However, this is not a cut and paste situation for you. Your CSS is a mess! You have #FOWNDTXT with position: absolute; for some reason. All the stuff is on defualt_modified.css. You want to go in there and clean out all the unnecessary code:

        You have:
        Code:
        #FOWNDTXT {
            width: 300px;
            height: 75px;
            color: #000000;
            font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
            font-style: normal;
            font-size: 16px;
            float: none;
            position: absolute;
            margin-left: 530px;
            left: 250px;
            top: 5px;
        }
        If should be:
        Code:
        #FOWNDTXT {
            float: right;
            font-size: 16px;
        }
        Then you want to place the <div id="FOWNDTXT"></div> above the image of your logo so that the two align horizontal when #FOWNDTXT floats right.

        Last edited by NMTEACO; 07-26-2015, 08:12 PM.

        Comment


        • #5
          Okay cool. I'll go test it out.
          ​Thanks again NMTEACO

          Comment


          • #6
            NMTEACO thank you for the css refresh. It worked and looks pretty good now.
            Now I wanna figure out how to put the word "categories" on the mobile menu right next to the ||| icon

            Comment


            • #7
              You could do it by editing your HTML file. But if you want a pure CSS solution add this to your css file:

              Code:
              .slicknav_icon:after {
                  content: 'categories';
                  text-transform: uppercase;
                  color:white;
                  font-size:1.3em;
              }

              Comment


              • #8
                awesome...That seemed to work!
                Thanks NMTEACO !

                Comment

                Working...
                X