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
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 could very well have lost it.
My :hover, a:link states do not seem to work on a mobile.
I have a fixed nav at the bottom of the screen:
/* nav */
nav#desktop {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
background-color: transparent;
padding-top: 28px;
z-index: 1002
}
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 2.3%
}
#media only screen and (max-width: 675px) {
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 3%
}
}
nav#desktop > ul > li {
width: 200px;
font-size: 19px;
font-weight: 400;
float: left;
margin-right: 12px;
position: abolute;
bottom: 0px;
overflow: hidden
}
nav#desktop a {
color: #000
}
nav#desktop a:hover {
color: #8974A7
}
On a desktop the hover works successfully, as in when you hover it shows purple and then goes back to black.
Why on a mobile, when the li item is clicked, does it go purple, and then stay purple.
I did have:
nav#desktop a {
color: #000
}
nav#desktop a:hover, a:focus {
color: #8974A7
}
Thinking :focus was behind it, having removed it now; still no change.
Interestingly, I have:
#mobile-open #mobile-container > ul {
position: relative
}
#mobile-open #mobile-container > ul > li {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#mobile-open #mobile-container > ul > li:last-child {
margin: 0px;
padding: 0px
}
#mobile-open #mobile-container a {
color: #fff;
text-decoration: none;
}
#mobile-open #mobile-container a:hover {
color: #ccc
}
For links within my open menu, and the two states work as expected.
As you can imagine, :hover is almost impossible to truly support on consumer touch devices (there's no detection for when a user is hovering over the screen but not touching it).
So the devices do the best they can, and they end up with what you observe, which is a pretty terrible experience, but you're at the mercy of browser vendors - you're developing on their platforms.
Do what often seems to be done, add a piece of JavaScript to detect (imperfect) user-agent/touch detection and add a class of touch to the body element.
And then, everywhere in your CSS you'd have to do this:
body:not(.touch) someselector:hover { }
Or do the inverse:
body.no-touch someselector:hover { ... }
If you decide you like the :hover implementation of a particular browser vendor when on touch, but not the implementation of another, then you can add further classes to your CSS to target specific browsers/devices.
All solutions are pretty terrible, really.
You need to use :active and :visited to change the color after you selected the element.
:hover on mobile don't work. Devices try to render it as better as they can but with touch device there's not an :hover status.
I am having trouble with the sub-menu items at the following site. Actually the problem is with the sub-sub-menu items, i.e. the 3rd level items (I am not sure what these are actually called).
You may need front-end password to view "calzada321" (no quote marks).
http://polynovo.com.au/
As per screenshot (link below), in most browsers, the 3rd level items are squished, ie they do not display in an attractive or useful fashion on hover. I am not sure how to fix (obviously). Any help appreciated.
http://polynovo.com.au/wp-content/uploads/2014/11/Untitled-1.jpg
/* 2.3 Navigation
------------------------------------------------------------------------------*/
#navigation {
margin-bottom: 7px;
position: relative;
z-index: 2;
}
#navigation .menu-item {
float: left;
background: url(../images/common/bg_nav-separator.png) no-repeat 0 center;
position: relative;
}
#navigation .menu-item:first-child {
background: none;
}
#navigation .menu-item.has-sub-menu:hover {
background-color: #e5eaef;
}
#navigation .menu-item a {
color: #002d62;
display: block;
font-size: 15px;
/* font-weight: bold; */
padding: 18px 17px 18px 16px;
text-transform: uppercase;
}
#navigation .menu-item:first-child a {
padding-left: 3px;
}
#navigation .current-menu-item > a,
#navigation .current-page-ancestor > a,
#navigation .menu-item a:hover {
color: #c72932;
text-decoration: none;
}
#navigation .has-sub-menu .current-page-ancestor > a {
color: #002e62;
}
#navigation .has-sub-menu .current-page-ancestor > a:hover {
color: #fcb040;
text-decoration: none;
}
/* Sub-navigation */
#navigation .sub-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
padding: 17px 22px 18px;
width: 155px;
background: #e5eaef;
}
#navigation .menu-item.has-sub-menu:hover .sub-menu {
display: block;
}
/* ---I added this item below made sub-sub items sit out more but still not good---*/
#navigation .menu-item.has-sub-menu:hover .sub-menu .sub-menu {
margin-left:200px;
margin-top:-35px;
display:block;
}
#navigation .sub-menu .menu-item {
float: none;
padding-left: 12px;
margin-bottom: 5px;
background: transparent url(../images/common/sprite_icons.png) no-repeat 1px -229px;
}
#navigation .sub-menu .menu-item a {
padding: 0;
font-weight: normal;
line-height: 40px;
text-transform: none;
}
There is some issue in your css code, like hovering action. first you should use direct child selector for showing the sub-menu, so the third level will remain hidden.
.menu-item:hover > .sub-menu{ display: block }
And lastly is for your problem, add styling for sub-menu starting from the third level. You just need to set the left property to 0;
.sub-menu .sub-menu{ left: 0 }
EDITED ANSWER ACCORDING TO THE CODE SNIPPET
you can change this selector which is for showing sub-menu to this
#navigation .menu-item:hover > .sub-menu { display: block }
this selector will show only direct sub-menu, not all sub-menu in one menu item. and you don't need to set margin top nor margin-left.
Next you need to add styling for third level menu, since this menu positioned on the left side.
#navigation .sub-menu .sub-menu{
left: 100%;
top : 0;
}
Since the sub-menu is absolute positioned, you just need to set the left to 100%, this will placed the third level menu sit next to the selected 2nd level menu
I installed the anything slider on my site and I'm trying to get the navigation to be tabbed like this: http://www.echappee-laine.fr/
I updated the CSS to make the tabs but I'm pulling my hair out trying to understand what went wrong because 1) the links don't cover the entire box, and 2) now that I've done this the navigation isn't responsive. (http://beta.harvest-express.com)
Any thoughts?
/* Navigation buttons, default state */
.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
background: #777;
color: #000;
}
/* Navigation buttons, active state */
.anythingSlider.activeSlider .anythingControls ul a.cur,
div.anythingSlider.activeSlider .anythingControls ul a {
background-color: #7C9127;
}
/* Navigation Links */
.anythingSlider .anythingControls {
position:absolute;
top:0;
left:0px;
list-style:none;
padding:0;
margin:0;
width:235px;
z-index: 20;
}
.anythingSlider .anythingControls ul {
margin: 0;
padding: 0;
float: left;
}
.anythingSlider .anythingControls ul li {
display: block;
height: 75px;
width: 235px;
border:1px solid #ccc;
background-image: url(.../transparant.png);
}
.anythingSlider .anythingControls ul a {
font: 11px/18px Georgia, Serif;
display: inline-block;
padding: 2px 8px;
text-decoration: none;
line-height: 75px;
background-image: url(../images/default.png);
background-position: center -288px ;
background-repeat: repeat-x;
text-align: center;
outline: 0;
}
.anythingSlider .anythingControls ul a:hover {
background-image: none;
}
1) the links don't cover the entire box
You have display: inline-block set on your a tags; unless you have a specific reason why they need to be that way, I'd change that to be display: block allowing the link to expand to fill up the containing li. Alternatively you could add a width: 100% to that rule.
2) now that I've done this the navigation isn't responsive
You've got an explicit width of 235px set on the anythingControls div.
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.