I've been fighting with a small(big) issue on a wordpress site all morning. I've tried adjusting margins, adding and adjusting an overflow attribute, adding media queries, and the lot. But it seems I can't get these elements to play nice with a minimized window.
As you can see, I just need the h1 text (Quiescent imaging...) to always stay visible and in place and I also need the text in the sidebar to stay together.
These issues also only occur with a minimized window.
Any tips are highly appreciated. Thank you!
So it turns out this is a lot more simple than needing to edit any code. The h1 attribute, rather, the title bar I was trying to edit can be modified toward the bottom of the page editor which we are using (fusion builder).
I usually overlook these simple solutions, but I'll accept the embarrassment if this helps someone out one day!
More info:
The Page Title Bar is not an Element; rather it is controlled via the Theme Options and the Fusion Page Options. This article will look in depth at the options that are available for this often overlooked tool.
https://theme-fusion.com/documentation/avada/options/page-title-bar-options/
Related
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.
I have a site based on Solar Sentinel Joomla template. www.sism.org
I'm having some visualization problem with chrome.
The right side-bar is shifted down after all the content, while it should be floating on the right!
Could someone explain me why?
PS: the template css is pretty messy, and there is some custom css and js made by me inline at the beginning of the page.
EDITED
It's hard to answer your question because you've not provided any code or other way for us to determine what might be going on for you.
At a guess, I'm going to say that the main content div on your page is extending (in width) and forcing the sidebar to drop underneath.
You can test this by making your main content section slimmer and see if the right hand bar decides to shift back into place.
As for why this might only be happening in Chrome and not other browsers, it's hard to know without more information.
Hey guys, I'm using GWT for a data-driven web application, and I'm having issues with a CellTable embedded in a TabLayoutPanel. As you can see from the screenshot, the scroll bar for the table does not appear inside the bounds of the TabLayoutPanel. (You can see just a couple pixels of it on the right.) If I mouse over the TabLayoutPanel in the inspector, it properly shows the boundary ending at that black border on the right.
For some reason I haven't been able to determine, the TabLayoutPanelContent object is extending outside the bounds of its parent, the TabLayoutPanel. Has anyone run into an issue like this before? Or does anyone see an issue in the HTML/CSS that might suggest a solution? I'm sure it's something minor, but it's frustratingly difficult to find.
TIA!
The trick to finding a solution always seems to be just asking the question. :)
I had apparently set the width of one-too-many widgets to 100%. (Between the TabLayoutPanel, ScrollPanel, CellTable, etc.) I just removed all the width constraints, then slowly added them as needed until the UI was as desired.