WordPress.com Forums » Topic: Responsive Width-Bouquet Theme

thesacredpath on "Responsive Width-Bouquet Theme"

thesacredpath — Thu, 01 Dec 2011 18:10:35 +0000

You are welcome.

dietitianduo on "Responsive Width-Bouquet Theme"

dietitianduo — Thu, 01 Dec 2011 13:41:40 +0000

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.

thesacredpath on "Responsive Width-Bouquet Theme"

thesacredpath — Thu, 01 Dec 2011 04:47:23 +0000

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.

#content

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

max-width: 725px;

dietitianduo on "Responsive Width-Bouquet Theme"

dietitianduo — Thu, 01 Dec 2011 02:39:54 +0000

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.

designsimply on "Responsive Width-Bouquet Theme"

designsimply — Wed, 30 Nov 2011 21:16:03 +0000

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.

thesacredpath on "Responsive Width-Bouquet Theme"

thesacredpath — Wed, 30 Nov 2011 17:27:11 +0000

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.

dietitianduo on "Responsive Width-Bouquet Theme"

dietitianduo — Wed, 30 Nov 2011 14:53:46 +0000

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?

designsimply on "Responsive Width-Bouquet Theme"

designsimply — Wed, 30 Nov 2011 14:35:33 +0000

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?

dietitianduo on "Responsive Width-Bouquet Theme"

dietitianduo — Wed, 30 Nov 2011 14:25:33 +0000

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.

designsimply on "Responsive Width-Bouquet Theme"

designsimply — Wed, 30 Nov 2011 14:16:02 +0000

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.

dietitianduo on "Responsive Width-Bouquet Theme"

dietitianduo — Wed, 30 Nov 2011 14:08:02 +0000

.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.

designsimply on "Responsive Width-Bouquet Theme"

designsimply — Wed, 30 Nov 2011 13:58:13 +0000

Try adjusting the date placement, like this:

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

dietitianduo on "Responsive Width-Bouquet Theme"

dietitianduo — Wed, 30 Nov 2011 13:54:00 +0000

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!