Avada Live Builder Display doesn't match actual site - css

I'm trying to make the main menu of the site be on one row, but it wraps to a second row, even though I set No Wrap. In the Live Builder, it shows it working exactly how I want it to:
The live site malfunctions in the way described above:
How should I go about fixing this? What other information do you need?

I figured it out. Just had to change the site width so the menu fit in the whole view.

Related

Where + how to edit Wordpress CSS to create a dropdown scrollable submenu in Wordpress?

I am a writer and I have menu for my chapters list on my website of 30+ chapters and currently it annoyingly looks like this:
current website
As you can see it cuts off, and Wordpress annoyingly doesn't have a feature that turns it automatically scrollable. There are 30+ chapters and you have to keep scrolling, scrolling, scrolling down to see them all.
I have found some good looking solutions on StackOverflow but don't know where and how to apply them on Wordpress.
If anyone could talk me through literally step-by-step 1. where to find the CSS of my Wordpress site 2. the code I'll need 3. where to paste it 4. if there's anything I need to add to the navigation block's inidividual "Additional CSS Classes" part like so: Additional box in the corner and anything else I need to do. I would be super grateful!
One of my fears is just dumping a bit of code somewhere in the middle of editable CSS and screwing up my entire site! My CSS knowledge is super beginner so laymans terms is very much appreciated thanks :)
I tried using Plugins (those seem even more confusing than CSS) and have considered using Elementor too but I have Googled and YouTubed, trying to find a solution and nowhere has something as specific as what I'm looking to achieve frustratingly.
I tried following this youtube video: https://www.youtube.com/watch?v=73XjO7hFZaw but didn't know what my "Target Element Selector" was, even when I went into Inspect on Chrome, all I found was this

Full width image in separated row on wordpress (Ref attacted)

He everyone,
simple question for everone.
I am trying to build this style but i am very new in WordPress and cant figure it out myself.
See the link below:
https://blind.com/what-we-do/
I like the part "Strategy, Branding, Digital, Motion" with the test one side and image the other side.
I would like to recreate this exact style with the Responsiveness included.
Thank you for your help.
Alexandre
Since you've mentioned that you're using Siteorigin's page builder, I've decided to do a short video of how I would arrange the elements on the builder to achieve the results you're after.
here's my screencast: http://somup.com/cFit60VLyy
Now there are few flaws with siteorigin's pagebuilder - there is no inbuilt column equalizer for rows unlike other page builders like WPbakery and elementor. So you will have to use a plugin or write your own CSS. If you want to go the plugin way, install the Equal height columns plugin
And then you can add a class to any column you want to have equal width on left and right. You can see in my video that I've used the "equal" class under the attributes of the cells.
Depending on the theme you're using, you might need to write some CSS for margins and paddings. I'm sure its quite straight forward. You can do this in 10 mins straight.
Good luck.

Website doesn't load portfolio content on mobile

I just made a website using a Wordpress theme and it all works good on desktop computers. However, while the site initially loads normally on my phone (I'm using iPhone 6 with iOS9, but the problem is the same on Android phones too, I tried two), once I click on the portfolio item, it loads a blank page (header and footer only).
When I tap on the address bar, I notice that it never went to the right link at first place (the portfolio item link), it just shows the homepage link and there is no content.
I managed to fix the problem by entering the external URL in portfolio item options. It was still internal link from the site but I made the link open the new tab (if it doesn't open new tab, the problem stays the same). However, if I choose to go back to the homepage from that link (the portfolio item link), the homepage is blank, there is only header and footer so the problem returns again.
Just so you know, the first portfolio item contains the external link outside the Wordpress and that one opens normally.
What is wrong with the mobile site?
The site URL is: http://svenharambasic.com
The screenshot is attached. Thank you!
P.S. There are also google ads showing, I never encountered that before, but I'll work on that once this is solved.
I only see a white screen upon clicking any of the homepage portfolio image links (except for the first link which goes to an external site in a new tab) on desktop and on mobile actually. There is a content_inner class with inline styling setting visibility:hidden.
It's unclear to me why it's doing that- maybe to remove focus from the body and draw focus towards something that is supposed to appear in the foreground but does not? If I remove visibility:hidden from the element in the browser, I see a series of additional images appear, which seems to me to be more an expected behavior. Are we on the right track?
I managed to solve this, it was the setting in the theme options; I had to disable grid lines... I can't say I truly understand why, but it worked!

JQuery Plugin (Hover-Caption) Adding Offset to Images In Internet Explorer (all versions)

I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that

Sidebar pushed below content in individual post (Wordpress)

I'm designing a blog in Wordpress using the Thesis Framework and there is an issue that I just can't seem to find a fix to:
Basically everything is fine on the main page, but when I go into any individual post, the side bar is getting pushed off and showing up right down the button of the page (below the comments).
It's pretty obvious that there is some kind of sizing/width issue and I've played around with a lot of the widths in firebug but just can't seem to find where it's going wrong. I can't find a difference between the main page and post pages either.
Any help would be greatly appreciated! A specific solution would be ideal because I've already spent a lot of time tinkering with it to try and address the issue.
Thanks in advance for any help!
I had this problem as well with the thesis framework. I found two reasons where it produced a similar mistake on my blog:
The first reason is that the sidebar + content area is bigger than you container. That would make the sidebar go below the the content. Make sure also that the content of the sidebar is also smaller than the sidebar. I had a Facebook box in the sidebar that was bigger, thus pushed the whole sidebar below the content.
An other reason was a plugin that I had installed. If you have any plugins installed try and see if one of those is interfering with the sidebar layout.
If that doesn't work you can also post a snippet of the code so that I can look at it.
I often have this problem when editing a page in html (text) mode and forget a closing tag, most notably a . If using tables, a missing , or similar will cause this.
So, in brief, make sure all your opening tags have a corresponding close tag.
Make sure the html is syntax-error free. I had the same problem and the culprit was a wrong closing tag (<b/>)

Resources