CSS - Float Left makes Div disappear - css

Using Divi in Wordpress.
I have 2 (among many) blog posts, one built without the Divi Builder(earlier on), the other built with Divi Builder.
This one was built without the Divi Builder and works nicely. I set float:left on article div.et_post_meta_wrapper and it looks as I want, with the Text wrapping around the image.
Working Post
This one, with the exact same CSS but was built with the Divi Builder, when I turn on float:left, it makes the entire Div disappear.
Broken Post
Can someone find the problem for me?

Related

How to add simple scrolling parallax effect to text in Wordpress Elementor by CSS only

I would like to add a simple scrolling parallax effect to a text on a white background in Wordpress Elementor by adding some custom css. The goal is that text moves slower when scrolling. Overall it would be nice to achieve that inside Elementor editor I could add this effect on any element (text, image) by using CSS only.
Example: On http://www.thinkceu.com/ the numbers: 01, 02, 03
I have tried:
Elementor tutorials: all said it is available in Elementor pro, which is not an option for me.
https://www.youtube.com/watch?v=rLrLJQBG_qo I have tried to add some parts from this video without any result
https://freefrontend.com/css-scroll-effects/ I have tried to add some of them with no success
I have also searched here on stackoverflow the existing questions, but they were all different, for example: Wordpress - Parallax effect however the step by step guide is not available anymore
FYI: I have no coding knowledge, I have only used WordPress, but it would be a great opportunity to start learning some css. :) Thanks in advance for all your help!

Avada Fusion - Top nav menu aligned left

I'm using one of Avada themeforest themes. I'm trying to build a very basic website identical to this in layout. I can't figure out how to get the top menus to the left next to my logo and ideally would like a very simplistic hover menu function rather than some elaborate accordian.
I've tried adding CSS within fusion builder / wordpress but to no avail.
here's my inspiration:
http://caralimccall.com/
thanks and any help would be great!!

Why my page is too wide when using RTL?

This is a WordPress issue and I'm asking this question here because I believe it is a CSS problem.
I'm using Wordpress and a theme named ShootinStar but I have to do my website in an RTL language. The theme supports RTL though.
Everything is perfect when the language of WordPress is English but once I change it to Farsi, then the width of my theme increases by maybe 4 times.
The website is visible and clear but you can actually swipe to left and see the rest of the background in a wide area.
Pages are fine, no problems with that. But the 'Post page' where I do my blogging which is my main page, is facing this issue. I tried assigning it to a page, but then that page will have the same problem.
I tried disabling plug-ins and changing themes, but nothing happened. I'm guessing that it is a CSS problem, but where is it exactly? I attached screenshots and highlighted the parts with red arrows.
This is after using element inspector:
What shall I do?!
You can add this CSS code to remove the unwanted space in the x-axis direction.
#container {
overflow-x: hidden;
}

Multiple content backgrounds on a Wordpress site?

I know little to nothing about HTML or CSS (but I am trying to learn little by little).
I am currently working on my professional portfolio and I'd like to break the website up a bit better than I have it now now (that is, with horizontal lines after each section). I've designed the website so that it is a one-page style site. However, it would be nice to change the content background for different sections of my resume, the about me (which I know needs more work, I hate talking about myself lol), and the contact me parts of the site. I'm thinking something along these lines, but much simpler.
I'm currently running Wordpress 3.8.1 and using the Highwind theme. I achieved the scrolling action with the Page 2 Scroll ID plugin. What you should be aware of is that all the content on the site is on a single page and the menu buttons merely point to different locations on the page by the way of divs. See this tutorial for a better explanation.
I'm not sure you're going to be able to get this happening with the Highwind Theme, or at least without some heavy customization of it.
The way the types of sites you're talking about work is that each section of the page has a 100% wide div with a 1255px wide div (the inside div could be anything really as long as it's not 100%) the inner div is centered inside the 100% wide outer div.
Here's a very quick codepen example...
http://codepen.io/catchlightWeb/pen/tpKrG/
For your example, instead of the SectionOuterOne and SectionOuterTwo classes having different colors, they'd have different background images.
Hope that helps.

Wordpress: display static image over slide show

I have a client that is looking for a Wordpress plugin or theme that will display an image over a rotating slider, similar to the home page here: https://www.threebakers.com/
Any thoughts on an out-of-the box solution, or do I need to build this one by hand?
Ironically, I did this exact thing on this site here:
http://www.gilbertmeatlocker.com
Its using the popular Flex Slider, but its not Wordpress. I was working with Drupal on that particular site, so its a custom implement of the stand-alone javascript Flex Slider.
I had to fiddle around with z-index and I used negative-margins to move elements into position.
That particular implementation on gilbertmeatlocker.com is extra complex because the silver frame around the edge is also overlapping the Flex Slider. I would recommend not doing a frame like this if possible, though. It added some serious bugs that were difficult to make work on all browsers.
Putting a single image over the slider like your bakery example or the gilbertmeatlocker.com logo shouldn't be a problem though.
If noone else recommends something better, you could try Flex Slider. There is a Wordpress version of it.

Resources