Center text inside a white box (Website question)
-
Hey guys.
So as I've mentioned before building a website for my wifes new cake business.
(Large learning curve, lots of googling, and help from a friend) Well I've asked him so many question I thought I would avoid him on this one.I have a rough idea on this, but I thought I would still touch base here because if my "idea" is correct I still have alot of research to do and find an old video on Pluralsight that I believe I watched a few months back.
So what I want to do is on
okotokscakes.ca/faqI want to have the content under the questions (they drop down when you click them) to essentially drop vetically as far as it has to to show all the content (no scrolling left right or up and down)
Kinda like Cake Boss's website http://bakeshop.carlosbakery.com/faqs/
(Just googled the first cake website that came to mind and it works that way, they all do!)Thanks for any help, advice, and guidance.
-
I'm not clear what the actual question is. Are you asking for what JavaScript library to use?
-
Mainly asking for a step in the right direction.
I believe I have to make the white boxes fixed? and then center the text within?
If you look at the first Question
"Can you make cakes for someone with allergies" you'll see it scrolls to the right for days.
Need to essentially know what its called I'm trying to do so the box will expand downwards farther and not horizontally. -
I assume I want my:
height: auto;but not sure how to deal with my width
-
Just went to check out the FAQ page and got a 404, is the page not published or set to private?
There may be a plugin to handle all of this for you automagically, I can take a look later this evening. Just offhand it does sound like you will want to set a width on the FAQ item element with height set to auto, but it's hard to say without being able to see the page.
edit: to be more specific about the width element, usually it's best to use percentages versus absolute pixels in today's world of super variable screen sizes. That would look like:
width: 100%;
for setting an element to take up as much horizontal space as possible.
-
Since you're using WordPress I would just use an accordion plugin, that would be the easiest thing to do.
-
Sorry faq should be live now:
And it is a faq plugin. Will give more details when not on mobile
Thanks -
@Sparkum said:
Sorry faq should be live now:
And it is a faq plugin. Will give more details when not on mobile
ThanksOh 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;
}
-
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.
-
@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.
-
@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.
-
@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?
-
@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.
-
@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.
-
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)
-
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???
-
@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.
