i'm working on this website http://josedelavega.nowcommu.myhostpoint.ch/
The homepages is pretty fine, but when i add content into others subpages this does not works. Looks like hidden. Ther's something wrong into the code? I just modified the template (http://themeforest.net/item/orquidea-responsive-wordpress-theme/5120180) adding this CSS rules:
.logo { float: right; margin-top: -8px !important; margin-right: 70px; }
nav#topmenu ul li { font-size: 15px; }
nav#mobilenav .logo { float: left; margin-right: 0px !important; }
.sectionboxtitle { display: none !important; }
.bodyfont { display: none !important; }
.descrtext { padding-top: 10px; }
.skinselector { display: none; }
This hides subpage content:
.sectionboxtitle {
display: none !important;
}
If you just want it to be hidden on the start page I'd recommend something like this:
.home .sectionboxtitle{ display: none;}
Related
I cant for the life of me figure out how to edit the style.css file to edit the width of the top navigation bar. our website as you can see, the top nav bar is too large, all the items should fit on one line. Here is the code:
.top-nav {
background: #151515 none repeat scroll 0 0;
}
.nav-top li {
display: inline-block;
}
.top-nav a,.nav-video a {
color: #fff;
display: block;
font-family: josefin_sansbold,sans-serif;
font-weight: 200;
padding: 25px 15px;
text-transform: uppercase;
position:relative;
font-size:30px;
}
.top-nav{
text-align: center;
}
div#Video_Categories {
padding: 10px 5px;
background: #fafafa;
}
#nav a {
color:#004282 !important;
font-size:18px !important;
}
There is also a chance that I may be looking at the relavent code for the top menu bar. I could attach the full css file here if possible. Bare with me this is my first post!
If you have the ability to override your current styles or edit them, then you can change the width of the class .container_24.
.container_24 {
max-width: 1200px;
}
Changing that gives me this:
I do marketing and communications for a small company where everyone wears many hats and I'm trying to independently make our blog a more user-friendly experience.
Here's the blog: https://blog.thrively.com
The website runs on WordPress using a third-party theme called Creative Child (I don't think this matters).
I've been able to make simple CSS changes within WordPress' Gutenburg editor, but I'm stuck trying to make the mobile experience responsive.
When I "inspect" on desktop and select the mobile view, I've discovered everything responds correctly until the width reaches 450px. At that point, the text just runs off the page to the right.
Here is the code that currently exists in the Simple CSS customization window where there is a "#"media section that applies to all screens less than 770px wide (this was here before I started with the company), so I thought there might be something in there that needs something added. Nothing I've tried has worked yet though.
Any advice would be greatly appreciated.
/* Enter Your Custom CSS Here */
#menu-primary-items {
position: relative;
top: unset;
left: unset;
}
#menu-primary-items .menu-item a {
font-size: 16px;
}
.wf-active .page-id-12165 .entry-title {
display: none;
}
.wf-active .page-id-12165 .entry-content img {
width: 100%;
}
#media (max-width: 770px){
.post-meta {display: none;
}
.post-details {display: none;
}
.site-header .logo{
position: absolute;
}
.headroom{
margin-top: 0px !important;
}
.menu-items{
top: 170px !important;
}
#masthead .site-header-container{
background: #fff;
}
.mean-container a.meanmenu-reveal{
margin-top: 10px;
}
.header-button-wrapper{
margin-top: 0;
}
#masthead {
position: absolute !important;
width:100%;
top:0;
}
.primary ul a, .primary ul a:visited{
color:#333333;
}
}
#primary .entry-title a{
text-align: left !important;
padding-bottom: 10px !important;
line-height: 1.3em !important;
}
.primary ul a, .primary ul a:visited{
color:#333333;
}
.site-header #blog-title{
color:#333333;
}
#primary .entry-title a{
padding-top:10px;
}
#menu-primary-items .menu-item a{
top: -165px !important;
}
.post p{margin-bottom: 20px !important;
}
.post content-width{width: 550px
}
.wp-block-cover {margin-bottom: 25px !important;
}
.wp-block-separator {margin-top: 20px !important; margin-bottom: 20px !important}
.entry-content{width: 650px !important;
}
.entry-title {
display: none;
}
.wp-block-cover__inner-container {width:80%; line-height: 50%
}
.wp-caption {display: none;
}
.entry-content ul {text-indent: -25px !important; margin-left: 25px !important; margin-bottom: 25px !important;
}
.entry-content ol {text-indent: -25px !important; margin-left: 25px !important; margin- bottom: 25px !important;
}
.col-md-5 {display: none;
}
Preview at 452px wide
Preview at 448px wide
Add the following style to css file.
#primary section.entry-content{ max-width: 100%; }
it will solve the issue
I am using Aspire Pro WordPress Theme.
I have added some custom css from customizer, css is updating when access the website from desktop or laptop. I have checked styling for mobile using chrome tools. It is working fine.
But when i access website from mobile custom styles not showing.
Website Link: https://williamlsnowden.com
This is actually your code.... The custom code you need in not here....
I added into the **** lines.....
Try it and clean cache
<style type="text/css" id="wp-custom-css">
.site-header{
background-color: #247f34;
}
.site-header.light{
display: none;
background-color: #f16334;
}
.footer-widgets, .site-footer {
background-color: #000;
}
.front-page-1 {
height: 80vh;
}
.site-footer a:hover {
color: #000000;
}
.after-entry {
padding-left: 20px;
}
.front-page-2 {
height: 80%;
width: 90%;
margin-top: -50px;
}
.flexible-widgets .widget {
margin: 0;
}
.image-section {
padding: 1em;
}
#media only screen and (max-width: 760px){
*****************************************************************
***************************************************************
.front-page-1 {
background-repeat: no-repeat !important;
background-size: contain !important;
background-position:center !important;
}
***************************************************************
*****************************************************************
.front-page-2 .enews-widget input {
width: 100%;
}
/*.front-page-1 {
background-image: url(//williamlsnowden.com/wp-content/uploads/2018/09/cover2-mobile.png);
}*/
}
</style>
I'm trying to create two themes for my project. I have following setup:
styles
globals
mixins
helper
themes
Now every theme has an index.scss:
#import "../../mixins/index";
#import "./colors";
#import "./breakpoints";
#import "./typography";
#import "core";
And every theme has a _core.scss:
#if import-once('core.scss') {
:global {
html, body {
background-color: $grey-page-background;
height: 100%;
}
body {
color: $grey-text-primary;
font-family: $font-family-standard;
}
body.page-body.modal-overflow-hidden {
overflow: hidden;
}
.container {
padding: 0;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
width: 100%;
#include breakpoint(large down) {
padding: 0 10px;
}
}
.no-margin {
margin: 0 !important;
}
.text-center {
text-align: center;
}
.green {
color: $green-smava-primary;
}
a:focus, a:hover, a:active {
color: inherit;
}
/* vb = vertical align block, for supporting browser dont support flex-box well */
.vb {
text-align: left;
}
.vb:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
/* vc = vertical align center child, for supporting browser dont support flex-box well */
.vc {
display: inline-block;
vertical-align: middle;
}
.ui.list {
list-style-type: none;
margin: 1em 0;
padding: 0;
.item {
table-layout: fixed;
list-style-type: none;
list-style-position: outside;
padding: .21428571em 0;
line-height: 1.14285714em;
}
}
.ui.list.large {
font-size: 1.14285714em;
}
}
}
As you can see -> index imports core -> and now the theme is imported to the according component (we have a versioning system for components - so this approach is good here).
So a component scss can look like this then:
#import '~styles/theme/smava/index';
.dialog {
&-input {
margin: 0 0 10px 0;
}
&-action {
border-top: 1px solid $grey-shadow-block;
float: right;
}
&-button {
&-pass {
margin-right: 30px;
}
&-login {
margin: 0;
}
}
}
Since I have multiple components core.scss gets imported multiple times.
The problem is, that I need to set a color for the body - this is the reason I have this core.scss.
So how can i deduplicate this? The approach with importing the theme has to stay the same unfortunately.
My stack:
React/Webpack/Redux/Node-sass
I'm coming to the end of a new web project for my father's website, however after opening it in IE, I now want to jump off a bridge!
I have attached two screenshots of how the site is rendering in IE in comparison to any other browser. For some strange reason, it is pushing the page content underneath the slider.
In IE it renders like this: http://cl.ly/JVgZ
In other browsers is renders as expected, like this: http://cl.ly/JVgo
(Sorry, newbie so I can't post images directly -.-)
As you can see, the whole of the dark grey text area is hidden beneath the slider.
I'm assuming this is CSS related, and my code for the slider is as follows:
body { }
.panel h2.title { }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { }
.coda-slider { padding-bottom: 0px; padding-top: 0px; background-color: #262626; }
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { overflow: auto !important; }
/* Change the width of the entire slider (without dynamic arrows) */
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 1280px }
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { }
/* Tab nav */
.coda-nav ul li a.current {
color: white;
height: 60px;
z-index: 9999;
position: relative;
}
.coda-nav ul li a.current:before {
content: '';
position: absolute;
height: 0;
width: 0;
bottom: 2px;
left: 50%;
margin-left: -9px;
z-index: 9999;
border: 10px solid transparent;
border-top: 10px solid #303030;
border-bottom: none;
}
/* Panel padding */
.coda-slider .panel-wrapper { }
/* Preloader */
.coda-slider p.loading { text-align: center }
/* Tabbed nav */
.coda-nav ul { margin-left: 167px; margin-top: 0px; margin-bottom: 0px; clear: both; display: block; overflow: hidden;}
.coda-nav ul li { display: inline }
.coda-nav ul li a { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: #bfbfbf; display: block; float: left; text-decoration: none }
.coda-nav ul li a:hover { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: white; display: block; float: left; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { display: none; }
.coda-nav-left a, .coda-nav-right a { display: none; }
p { color: #bfbfbf; }
I hope someone is able to save me!
Thanks so much in advance for your time and any help you are able to offer.
Edit: This code is also present in my HTML document in the section...
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
#sliderarea {position: absolute !important; margin-top: 0px !important;}
div.orbit-wrapper {margin-top: -140px !important; position: absolute !important;}
</style>
<![endif]-->
I think the problem is with your clearfix technique. A “clearfix” is what gives floated elements, such as your slider, an externally-visible height, instead of the normal zero height of floated elements. Your clearfix is working in most browsers but not in IE.
Try the alternate methods of clearfixes described in this answer about methods for clearfixes. Maybe those other methods would work better than your current one. I’m have trouble telling what your current method is because your clearfix rules are mixed with your visual-display rules. Start with the micro-clearfix at the top of that answer:
/* For modern browsers */
.coda-nav ul li a.current:before,
.coda-nav ul li a.current:after {
content:"";
display:table;
}
.coda-nav ul li a.current:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.coda-nav ul li a.current {
zoom:1;
}
Delete any rules in your existing code that the clearfix would override.