WordPress.com

1. dietitianduo
   Member
   Nov 30, 2011, 1:54 PM

   When I minimize the page or make the web page smaller, responsive width works for everything expect for the post text and the container-- they float over into the right sidebar. I tried changing the overflow css for everything to auto but it is not working for those two.

   Also, I had to change to overflow setting for the date tabs on the left-hand side to visible for them to show up. However, now there's a gap between the date tab and the content container.

   Note: I started with the Blix theme and changed to Bouquet. Perhaps some of the css adjustments were carried over from Blix and are causing the issue?

   I'm new to css so any help would be much appreciated! Thanks!

   The blog I need help with is dietitianduo.com.

2. designsimply
   Staff
   Nov 30, 2011, 1:58 PM

   Try adjusting the date placement, like this:

   .entry-date {
       left: -5em;
   }

3. dietitianduo
   Member
   Nov 30, 2011, 2:08 PM

   .entry .info .date {
   padding-left:15px;
   background:url('images/spring_flavour/post.gif') center left no-repeat;
   }

   I'm only finding this but it doesn't make a different when I change the padding-left pixels. Any idea designsimply? Thanks for your help.

4. designsimply
   Staff
   Nov 30, 2011, 2:16 PM

   Did you try the update I mentioned before? It worked in my tests. You need to add it to your Appearance → Custom Design → CSS page at the bottom.

5. dietitianduo
   Member
   Nov 30, 2011, 2:25 PM

   Worked! :) I didn't realize I was adding that text-- thought I needed to adjust the pixels on the text I pasted above.

   Any idea on my other question? Now the date is cut off too when the page is minimized.

6. designsimply
   Staff
   Nov 30, 2011, 2:35 PM

   I would recommend removing all of your custom CSS and just adding in the snippets for things you do wan to change. It should be specific to the theme you're using now anyway, and you're right that past CSS changes from using a different theme like Blix could cause problems or just be irrelevant.

   For example, I don't see the ".entry .info .date" selector used in Bouquet.

   Also, code like "url('images/spring_flavour/post.gif')" will not work in custom CSS, it need the entire URL starting with http:// if a url() is used in the custom CSS editor. That is why you shouldn't copy and paste the original CSS entirely and you should just add in rules for the things you want to change.

   Let's step back. What were you trying to change before you saw the date issue happening? Also, would you be willing to remove the CSS you have now and just add in changes from this point forward?

7. dietitianduo
   Member
   Nov 30, 2011, 2:53 PM

   The image url for spring_flavour is from the Bouquet theme I believe. I do want to change the orange background in the content container and the sidebar to other colors but I haven't attempted that yet.

   Since Blix was such a narrow theme I had tried to change the width before switching to this one. That could be part of the problem.

   How would I remove the CSS changes I've already made? When I switched from Blix to Bouquet it seems like it combined certain parts of the CSS. Not sure... Would I just copy the Bouquet original style sheet and start from scratch? Is that going to remove content, widgets, pages, etc that I've already built?

8. thesacredpath
   Staff
   Nov 30, 2011, 5:27 PM

   CSS is theme specific. To remove the previous changes for blix, delete all the CSS from the CSS edit window, make sure "add to existing..." is selected and then click save stylesheet. That will return you to the original stylesheet for the new theme.

9. designsimply
   Staff
   Nov 30, 2011, 9:16 PM

   Even if spring_flavour is from the Bouquet theme, you can't use url() in custom CSS without the entire image URL starting with http://

   That's part of the reason why copying and pasting the entire original stylesheet is usually a bad idea and just writing in the new pieces for what you want to change is better.

10. dietitianduo
    Member
    Dec 1, 2011, 2:39 AM

    Those changes are no longer visible under CSS revisions since I did them a long time ago and other changes have been made.

    Any other suggestions? It seems like the only the responsive width is off. The other thing I'm having trouble with is changing the size of the headers in the side bar. I tried to change the text size in multiple places but nothing is ever changed when I preview the page.

11. thesacredpath
    Staff
    Dec 1, 2011, 4:47 AM

    Add this to the bottom of your CSS to change the size of the widget title text (originally 13px)

    .widget-title, .widget-title a {
    font-size: 16px;
    }

    For the responsive bit, you cannot set a static width for the content area. You have to set it as a "max-width" and then it can narrow if it has to.

    In

    #content

    change "width" to "max-width" as below.

    max-width: 725px;

12. dietitianduo
    Member
    Dec 1, 2011, 1:41 PM

    Worked! You made my day thesacredpath!

    Thanks designsimply and sacredpath. Much appreciated. I'm sure I'll have many more questions as I continue to learn about css.

13. thesacredpath
    Staff
    Dec 1, 2011, 6:10 PM

    You are welcome.

Topic Closed

This topic has been closed to new replies.