Center text inside a white box (Website question)

stacksofplates

Since you're using WordPress I would just use an accordion plugin, that would be the easiest thing to do.

https://wordpress.org/plugins/tags/accordion

Sparkum

Sorry faq should be live now:
And it is a faq plugin. Will give more details when not on mobile
Thanks

stacksofplates

Sorry faq should be live now:
And it is a faq plugin. Will give more details when not on mobile
Thanks

Oh I see now. I only saw the 404 also. So you have the accordions set up, you just want the content to fill the accordion.

It looks like the horizontal scrolling was from a bunch of non-breaking spaces (nbsp;). If you put in normally formatted text it looks ok. Just comment out the height of 121px and it should work.

Edit: It looks like that height is hard coded in the html. If you add this to your css file it should work:

.ui-accordion-content {
height: auto !important;
}

WingCreative

Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

stacksofplates

@WingCreative said:

Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

I just unchecked the 121px in developer tools, it did initially show that way for me also or are you saying that because it shows 121 in my screen?) If that's the case, maybe it's adjusting based on the resolution?. I used the !important just because it wouldn't override without it.

For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

WingCreative

@johnhooks said:

@WingCreative said:

Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

stacksofplates

@WingCreative said:

@johnhooks said:

@WingCreative said:

Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

I edited the post but not in time :P. I wonder if it is dynamically changing based on resolution, but why a 1px difference? And why in px?

WingCreative

@johnhooks said:

@WingCreative said:

@johnhooks said:

@WingCreative said:

Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

I edited the post but not in time :P. I wonder if it is dynamically changing based on resolution, but why a 1px difference? And why in px?

There's the mystery... without knowing which plugin is being used it's hard to know for sure.

If @Sparkum were interested in digging deeper into this, he could try pasting some dummy paragraphs from a Lorem Ipsum generator into one of the blank boxes before setting the height flag. It might be built to dynamically set the height for each accordion item, but I don't understand why the plugin dev would do that versus a simple "height: 100%" setting.

stacksofplates

@WingCreative said:

@johnhooks said:

@WingCreative said:

@johnhooks said:

@WingCreative said:

Agreed that it's a combination of the inline styling and the non-breaking spaces used for the placeholder text. Oddly, the inline height was set to 120px when I checked it. Either way, setting "height: auto !important;" for the element will probably fix it as @johnhooks suggested.

The question is how the inline styling got there to begin with... I am assuming this is probably due to some javascript in the accordion plugin? Is there any setting in the accordion plugin that is set to about 120, or any settings related to height? If the !important flag works then it might not be worth bothering with for now, but generally every !important flag in your stylesheet is a shortcut that doesn't really address whatever root issue you're wrestling with.

I just unchecked the 121px in developer tools, it did initially show that way for me also. I used the !important just because it wouldn't override without it.

For whatever reason, sometimes these plugins have hard coded sizes (and in px even) so it's fun to have to do your own styling on top of their styling.

Same - I am hoping the inline styling is something that can be set in the plugin settings, but it's possible that it's just hard-coded in there. I thought it was odd that it was slightly different on my screen though, as if the inline style was being dynamically generated or something.

I'll admit I have plenty of !important flags in my own stylesheets due to things like this, I mostly mention it as a potentially more elegant way to solve the issue if OP is interested in learning more about CSS.

I edited the post but not in time :P. I wonder if it is dynamically changing based on resolution, but why a 1px difference? And why in px?

There's the mystery... without knowing which plugin is being used it's hard to know for sure.

If @Sparkum were interested in digging deeper into this, he could try pasting some dummy paragraphs from a Lorem Ipsum generator into one of the blank boxes before setting the height flag. It might be built to dynamically set the height for each accordion item, but I don't understand why the plugin dev would do that versus a simple "height: 100%" setting.

Ha I don't either. When I pasted the lorem ipsum content in, it didn't automatically resize, but that was through developer tools so it might do it correctly if you can refresh the page.

Sparkum

Hey guys.

Sorry for the delayed response playing with the kids before bed.

Thanks for all the advice! I'll give them all a try once the kiddos are asleep.

And to answer the question the plugin is "WP Awesome FAQ"

(Will add a link when on a comp)

Sparkum

Hmm so finally got infront of a computer, started from the bottom and worked my way up through the solutions and the most annoying thing is the problem more so appears to be my "content content content..." eh? Copied 5 paragraphs for Lerem Ipsum; turned height to auto and bam everything was perfect.
It didnt even attempt to format to the right when I copied the paragraphs in....
So thats really strange and annoying cause I was already adjusting height: auto; before making the post =/

Thanks for all your help guys! And hey, if you've got any suggestions for the website I'd love to hear them.

P.S. what are these developer tools you all speak of? The only website tool I've used is Firebug so I'd love to know of something else.

Thanks

EDIT: Literally didnt even need to height: auto; just added the paragraphs and bam, worked how I wanted it. I literally didnt even have a problem! Just the content I added somehow screwed it all up???

stacksofplates

@Sparkum said:

Hmm so finally got infront of a computer, started from the bottom and worked my way up through the solutions and the most annoying thing is the problem more so appears to be my "content content content..." eh? Copied 5 paragraphs for Lerem Ipsum; turned height to auto and bam everything was perfect.
It didnt even attempt to format to the right when I copied the paragraphs in....
So thats really strange and annoying cause I was already adjusting height: auto; before making the post =/

Thanks for all your help guys! And hey, if you've got any suggestions for the website I'd love to hear them.

P.S. what are these developer tools you all speak of? The only website tool I've used is Firebug so I'd love to know of something else.

Thanks

EDIT: Literally didnt even need to height: auto; just added the paragraphs and bam, worked how I wanted it. I literally didnt even have a problem! Just the content I added somehow screwed it all up???

That's great!

Developer tools is like firebug but its on chrome, but its built in. Just hit F12. Firefox has tools built in also.

Sometimes the sites get funky from the nbsp;'s.