I want to start to write about some of my experiences with WordPress and the challenges and solutions etc when using it. Before that, I want to stress that these are my experiences. I worked through the issues (e.g. research through the internet, trial and error, cry, scream, sob etc) but as a whole, they are my personal experience. I dont want anyone to think that I am sharing this as an expert (I am not at all). A lot of my issues are solved through brutal force which will get some people upset. This is my blog and notebook and I shared my personal experiences, not expert views 🙂
Starting off now…. When I went live with the latest design of patnotebook.com, I saw a very frustrating problem. Texts are appearing next to my images (specifically, portrait images) and they disrupted the flow of the article and made it really horrible to look at. But I did not have time to investigate as I was busy with the rest of the migration. Finally, I was able to make a local copy of the web site (more on that later) and after a bit of investigation, managed to solve it.. a local copy of your web site helped as you can daringly made changes to the site without fear 🙂 🙂
First the issue.. Look at the text next to the image.
A bit of reading up showed that this is due to commands such as these and to solve them, you need to make the code changes to the CSS stylesheet so that instead of “float:left”, it becomes “float:none”.
.alignright {float:right; }
.alignleft {float:left; }
But when I looked at my own CSS stylesheet (and believe me, I know nothing of these till recently when I started to use WordPress.. I am not a programmer.. at least not a web programmer..), I could find the codes there.
However, even when I change to the following
.alignright {float:none; }
.alignleft {float:none; }
It does not work. Looks like I need some CSS training 🙂
I went back to look at the HTML code and then logically saw that there was no “alignleft” class anyway in the photos. They are just plain IMG tags that are linked to the photos. In other words, nothing should trigger the use of the “alignleft” coding.. (not sure if I even made sense here). Luckily, Chrome came to the rescue… in Google Chrome, you can right click an element and then “INSPECT ELEMENT”. So i right click the area where the messy code are and the INSPECT ELEMENT and saw this:
Looking to the right, it tells me that it is NOT CSS stylesheet that caused the problem, but another CSS called “typography.css” which is issued together with the WordPress theme. And in that css, indeed there seemed to be a code that seemed also caused the issue. In other words, it is another area of the web site that caused the issue, rather than stylesheet, where we generally do such coding.. weird 🙂
So i went to search for that typography CSS and found in the theme folder. Made a change to the code using my software (by the way, I used a software called CODA for WordPress code changes, and even WordPress directory files changes such as wpconfig.php and .htaccess file etc. I highly recommend this software !).
BEFORE
AFTER
And it worked 🙂
Other examples:
And even on iPad 🙂 🙂
SO SO HAPPY TO SOLVE IT. I know this is a small issue to most IT experts but I am not a web developer and the process to solve it made me very happy…
I love to learn things and solve such issues.. Guess that’s why I am my current job 🙂
