I am using WordPress and have a problem with overlap between the sentences of body and blog sidebar.
But it just happens on mobile phone with the small screen size (4-5 inches) only, laptop or tablet is ok. How do I separate them to display better and avoid overlap issues?
This is the information of issue: Theme WordPress: Organic food theme
Link issue: Link of my website, that has this issue on mobile
image file of issue
Please help me with this. Nice day, Quanglepro
In your CSS (http://quanglepro.com/wp-content/themes/organicfood/framework/shortcodes/shortcodes.css) you need to edit:
.readmore {
border: 1px solid #bfbfbf;
border-radius: 5px;
padding: 10px;
text-shadow: none;
white-space: normal;
display: inline-block;
}
Changing white-space to "normal".
Related
Ok, here is the code I grabbed from http://MKVCage.com when checking out the source code, they are using the same WP theme as me, but are using the PRE as the 'class' for this, I wish to use something that is easy to insert from the 'Creating Post' section (I assume 'pre' worked for them):
pre {
font-family:Open Sans;
font-weight:400;
display:block;
font-size:13px;
white-space:pre;
white-space:pre-wrap;
border:1px solid #ededed;
background:#FCFCFC;
-webkit-box-shadow:0 2px 5px 1px rgba(0,0,0,0.25);
-moz-box-shadow:0 2px 5px 1px rgba(0,0,0,0.25);
box-shadow:0 2px 5px 1px rgba(0,0,0,0.25);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
line-height:22px;
padding:8px 10px
}
the original site: http://www.mkvcage.com
My Site: http://tvepisodes.me
Both Wordpress Sites are using the free "heiro" theme
I wish to have the same 'boxes' that only present themselves on say when a certain TAG or CODE or shortcode is entered...Any help please.
I'm using PRE at the moment, but I noticed HTML/VISUAL is no longer available on WP Postings, does anyone know of a HTML Plugin that will bring the WYSIWYG/HTML tabs back please (request #2)
Thanks everybody, but I decided to go with the PRE tags in the post to accomplish this, as far as I can see with creating a whole new shortcode just for this, and the <p> tag is already taken for other normal paragraphs, I went with how mkvcage.com does it, maybe I will come back to it later...
For now It WORKS & I'm happy with the research & outcome so far!
Hi I've been trying to create a smart button menu set in an drupal block that remembers which button has been clicked (which site it is on). For reasons that don't matter, it is not a menu it's an in-block item. I created the following in-line:
<div>Overview</div>
<div>Instruments</div>
<div>Travel</div>
This coupled with the following css produces lovely buttons:
.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}
.button:hover {
background-color: green;
color: white;}
.button:focus {
background-color: green;
color: white;}
.button:active {
background-color: green;
color: white;}
So everything above works great. However, the green activation color does NOT stay. As soon as I go click it goes back to what it was before. I want it to 'show' the page it is on with it's color change and only the currently chosen button will have the green color. What I have not works great except for that little issue. I've read around on the site a bit and here are some things that do not work:
--> inline php, creates errors link unreadable, if I define a class as selected with a different color, this does NOT work:
Overview
What also does not work is defining an additional class in the <a href > or <div> to make it 'selected', at best if I use the css file and do
.selected a { color: green; }
#selected a { color: green: }
I can permanently change the color to green, which is not what I want at all. I saw the discussion previously of using lists <li id="selected"> to create menues but not only does this not give me very nice buttons like my div format does, it also flat out does not work. See: CSS: How to change colour of active navigation page menu
The color just changes permanently, I only want it to change color if page=page of link. Since I'm using div this means I also cannot use the other pseudo-class-selector tricks like :target or :root. I have a feeling php is the way to go but I don't know why it can't be read in-line from my drupal box item. It has no problems with html or css in-line. Any ideas?
Try this code
CSS
.button:active, .button.selected {
background-color: green;
color: white;
}
PHP
Overview
what you wrote is calling for something else...
.selected a is targeting any element with the class "selected" which is inside an anchor tag, what you mean is an anchor tag which has the class selected = a.selected
ok, so I heard back from our system administrator and Drupal safety settings do not allow for in-line php or java scripting. There is literally no way to do this with div statements. The only way is to delete everything and make a new block of type menu block. In a menu block the psuedo-class :active will stay active if you use css
li .active
otherwise you can try to get php enabled but most drupal areas do not allow that or java scripting (at least it's not allowed where I am).
I am working with the site cardinalmma.com/ but you can see that the menu is not centered. For example see the news menu its in the left portion but with some padding. I want it to be centered can anyone help me.
thanks
Somdeb
You want the individual navbar labels centered, correct?
li.menu-item {
text-align: center;
}
This targets the <li> tags in your menu, identified by the .menu-item class. The text-align: center; rule takes care of centering the <a> tag with your text in it.
In my browser, this modification makes it look like this:
Try something in your css stylesheet to make the menu items be align center.
try something with the class menu and the li part:
.menu {
text-align: center;
}
Or something in that direction
Please update your css. This should resolve your issue.
.menu_top a {
color: #eee;
font-weight: bold;
line-height: 3.4em;
padding: 0 14px;
text-decoration: none;
height: 50px !important;
text-align: center;
display: block;
}
.menu_top ul ul li a {
text-align:left;
}
To center the navbar labels use this css courtesy of Surreal Dreams:
li.menu-item {
text-align: center;
}
Now to elaborate on how to find this solution. The best way to edit/develop CSS for wordpress is to use firebug or Chrome's developer tools to find the element you want to modify.Then you can add CSS right there and see the results real-time (these changes are not permanent). I would say it is likely this is how Surreal Dreams found the solution.
If you want to learn more about using the Chrome dev tools tool go to this page: https://developers.google.com/chrome-developer-tools/.
If you are new to CSS (I dont know if you are new to CSS or if youre problem is strictly editing CSS) for wordpress you should go check out http://www.codecademy.com/tracks/web
I have a little problem. At the end of my R script I create an image .png as output. I wanna show this image on my website but sometimes it is drawn, sometimes it is not drawn. I don't understand how it is possible. I`ll put my code:
I insert the image in a div with this features:
#diagramm {
position: relative;
border: 2px solid #333;
border-color: #6495ED;
width: 820px;
height: 370px;
margin: 2px auto;
margin-top: 2em;
background-image: url("/home/daniele/public_html/appweb2013/venn_final/fungo_final.png");
}
Where is the mistake? Can I use a better method?
This is CSS, it only puts specific design rules for an element that has the id diagramm.
So what you've posted is not code so to speak.
In what way do you generate the output? When? what does the user do to generate it etc.
Do you have any javascript or html code you can show?
Wondering if anyone has a solution for this.
I would like to present an archive of thumbnail images oldest at the bottom and newest at the top. I would also like the flow itself to be reversed... something like this:
The page should be right aligned, with future images added to the top of the page. I am creating the page dynamically with PHP pulling image filenames from a MySQL DB. The catch here is I would love this layout to be fluid, meaning most PHP tricks for counting images and building the HTML accordingly go out the window.
Is there a way to do this with Javascript or even just CSS?
See: http://jsfiddle.net/thirtydot/pft6p/
This uses float: right to order the divs as required, then transform: scaleY(-1) flips the entire container, and lastly transform: scaleY(-1) again flips each individual image back.
It will work in IE9 and greater and all modern browsers.
CSS:
#container, #container > div {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
#container {
background: #ccc;
overflow: hidden;
}
#container > div {
float: right;
width: 100px;
height: 150px;
border: 1px solid red;
margin: 15px;
font-size: 48px;
line-height: 150px;
text-align: center;
background: #fff;
}
HTML:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
..
</div>
CSS Flexible Box Module was made for this type of thing. See a quick example I whipped up: http://jsfiddle.net/c6QLC/2/ (look at this in Firefox)
Now the bad news: you can't really rely on it yet. Not only is the spec being rewritten, the current implementation doesn't support box-lines (which I did include in the example), which would allow the items to be in multiple rows as opposed to being overflow.
The new spec is being written into dev versions of some browsers, so it will happen. It's just a matter of time.
In the meantime, perhaps something like Isotope might fit your needs.
Should you want to check out the spec, you can find it here: http://www.w3.org/TR/css3-flexbox/
This can be solved with jquery masonry plugin. It's a bit like isotope but free of charge for private and commercial users.