My site is the following:
http://www.evarancho.com/
The problem is that the email on the header is hiding when you make the screen smaller. I don´t know how because it was not happen before and it just started out of nowhere.
I have tried this css line but it is not working.
.w-text-h{display:show !important;}
I don´t know what to do. Any help is appreciated.
Thank you!
I see it on the screen in mobile.
Anyways, display: show is not right.
Try display: block !important
It is difficult to narrow down.
I suspect this is the issue:
#media (max-width:600px) {
.header_hor .l-subheader.at_top {line-height:36px;height:36px;}
**.header_hor .l-header.*sticky* .l-subheader.at_top {*line-height:0px;height:0px;overflow:hidden;*}**
.header_hor .l-subheader.at_middle {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_middle {line-height:50px;height:50px;}
.l-subheader.at_bottom { display:none; }
.header_hor .l-subheader.at_bottom {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_bottom {line-height:50px;height:50px;}
The line height 0 and all all that would definitely be a problem and I believe it is set to sticky (in the us.headerSettings javascript source on the page, the header is set to sticky). A possible quick fix, rather than editing the CSS (suggested process mentioned below), might be to make the header not sticky in the settings. Though I'm not familiar with this theme, so I can't be sure that that will fix it, but it's a good bet.
If not the above, this might be the next place to look:
#media (max-width:600px) {
.ush_text_3 { font-size:13px; }
}
.ush_text_3 { white-space:nowrap; }
Perhaps the nowrap is causing an issue? I'd see what happens if it's removed.
These changes can be made in the css style file directly with to issues: 1. if you break it it's not easily recovered and 2. you'll lose changes with theme update.
Usually, making a child theme and adding the custom changes in the child themes style is recommended.
This can be done with one of many wordpress child theme plugins. I recommend Child Theme Configurator
There's also an error with the color in the css file, but it isn't the issue as it's just ignored:
.ush_text_3 .w-text-value { color:; }
(see errors here.)
Related
Never used CSS before and was pleased to find how to change the header color, it worked great.
Now trying to remove or at least reduce the white space between the page title and the header(?) where my logo is.
Read the similar question but the suggestions didn't work for me.
I also want to make the PAGE TITLE itself smaller as it looks too big on a mobile phone, have tried pasting various bits of code that I've found in searches but nothing has worked.
I'm in my 60s and am not very techy so please be gentle :)
Many thanks in advance,
My site is: www.andypiggott.com (Astra theme)
First, you need to head over to the Appearance » Customize page from your WordPress dashboard, The tab will slide to show you a simple box where you can add your custom CSS, now add this code:
.ast-plain-container.ast-no-sidebar #primary {
margin-top: 0 !important;
}
For page title you can paste this code :
#media only screen and (max-width: 600px) {
.entry-title {
font-size:20px;
//or what ever the font size you want to be on mobile
}
}
I've been trying out Docusaurus for doing some documentation. Only problem is that I'd like more space for the page itself rather than the side bar/toc. I'm using preset-classic. I've tried overriding --doc-sidebar-width in custom.css but nothing changes. Is there another way to do this?
You are in the right path, just add !important.
For others who may need this. In the file .\src\css\custom.css, add:
:root {
--doc-sidebar-width: 220px !important;
}
Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.
I had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.
In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:
.radioscrolllist .list {min-height: 2em;}
However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.
Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:
dialog.css
plonebrowser.css
columns.css
This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:
/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
/* Image browser was jumbled */
float: none;
}
#content #internallinkcontainer .list.item span,
#content #internallinkcontainer .list.item a {
/* Link browser was packed too much */
position: inherit;
}
#internallinkcontainer input[type="radio"] {
vertical-align: middle;
}
/* #end */
Which get's my Link Browser looking like this again:
Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with
plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.
plone.css
plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.
plone.css generation:
https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py
Note: plone.css is #import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.
I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):
#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }
(Clearly we should find a less hacky solution, but I haven't had a chance.)
You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.
Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.
I am trying to customize one field of a discussion forum in SharePoint, basically i want
to resize (maker bigger) the body Field.
I think this can be done applying a new css specific to that field but i am not sure how to do this, becuase it's seem that some other css are overlapping the one that i created and that’s why mine is not applied.
Any ideas on how to solve this issue?
have you tried adding a !important after the css rule?
like
.bodytxt
{
height: 300px !important;
}