I have been working on this for about 45 minutes and I'm sure the answer is ridiculously easy, I'm just not getting it. I need to take out the width element of .content (width:760px). However, when I change the CSS (it's a wordpress.com site, which is why I have to use the customizer and can't just do this via the editor) it just ADDS a content class and doesn't change the one in the stylesheet.
This is what's in the stylesheet, the site uses the content-sidebar-wrap style:
/* Wrapping div for .content and .sidebar-primary */
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 930px;
}
.content-sidebar-sidebar .content-sidebar-wrap {
float: left;
}
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
float: right;
}
/* Content */
.content {
background-color: #fff;
border-radius: 3px;
float: right;
margin-bottom: 30px;
padding: 40px;
width: 760px;
}
Because it is a wordpress.com site, not wordpress.org, we can alter the CSS in the "customize web" tab.
In your "customize web" tab, try putting this:
.content {
width: initial !important;
}
Then the 760px width would be taken out.
Related
My logo is overlapping my menu bar I just went to space it from overlapping
I tried changing the code but I'm a novelist so I really don't know what works I know about HTML but it's not the same.
.navbar-nav > li > a {
font-size: 20px;
}
.nav { right: 10px; }
Whenever I change the code it messes up the font size and it still over lamps
Here is the website:http://143wear.com
As you are using WordPress, through Admin dashboard you can set the max-width: 146px; to Logo,
Else you can use the following code into CSS,
By using this code there will be least chances for responsiveness issues,
In case you need bigger logo, you have to customize the code.
.site-header .logo img {
max-width: 146px;
}
.container {
width: 100%;
}
.header-logo {
width: auto;
}
.header-right {
width: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
justify-content: space-between;
}
Would be a working solution (might need some improvements for responsibility)
I recently added a widget to my website header for desktop mode. I struggled getting this widget to be on the same line and off to the right of the logo, but I eventually got it. In the process, it appears I messed up how the header looks on mobile devices (refer to twoguysplayingzelda.com for an example). Since 65% of my viewership is via mobile, I would like to fix this but have not figured out how. I would like the logo to be centered, completely view-able, and the menu icon on the left side (it use to be before I made the change). I am aware that I need to add coding into the responsive section of my style.css. Below is what I currently have for my header in CSS (desktop section). I knew nothing about CSS and HTML before I started my website, so I am still somewhat of a noob. Thanks for your help
div#header-widget-area {
float: right;
}
.header {
padding-top: 10px;
padding-bottom: 60px;
color: #01B3D9;
}
.header .cover {
background: rgba(29,29,29,0.0);
}
.header-inner {
position: relative;
}
.header .blog-logo {
text-align: left;
}
.header .logo {
display: inline;
float: left;
}
.header .logo img {
max-height: 50px;
width:auto;
}
The menu icon is pushed to the right by the logo because they both have float: left.
Try to remove float: left from .logo, and add display: inline-block to .blog-logo. That should fix both of your issues.
Basically this is one question but might need a multi part answer to remove the excess spacing. Basically the problem occurs when setting the featured image on a post on the default twentysixteen theme. I have a live test environment setup to show this here: http://192.241.239.174/index.php/2016/11/02/hello-world/
Here is a shot of how it currently is vs what I'm expecting it to look like: http://prntscr.com/d204p5
Thank you for any help
Edit: Further researching similar questions I have gotten slightly closer by using some custom css to change the thumbnail/featured image max width to 150 which should be fine as all my featured images are going to be 150x150 anyways. This code was added into custom css:
.post-thumbnail img {
float: left;
margin: 5px 15px 10px 0;
max-width: 150px;
}
Now the text does appear slightly higher but still fails to wrap the thumbnail and is still not close enough to the thumbnail. I'd like to have the text closer to the thumbnail
EDIT: Complete solution
The complete solution I used was adding this code into my custom css:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100%;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
width:100%;
}
i don't think that's the better choice to make in fact i would have setup a child theme and worked on it, by the way:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100% !important;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
}
You may need to add !important keyword if something doesn't work.
The result: Is that like what you wanted?
I made a webpage, but I have a problem with my menu CSS.
http://www.kezszobor.hu
My problem is that when the mouse hovers over the menu, the hover background does not fit the full button.
This is a Joomla + Cinch Menu module.
Can anyone help me?
Use this CSS:
ul.flyout-menu .menu-link a:link {
min-height: 30px;
}
ul.flyout-menu.text-left .menu-link {
height: 30px;
margin-right: 0;
}
ul.flyout-menu .item-wrapper {
height: 30px;
}
ul.flyout-menu li {
height: 30px;
}
If you put it at the bottom of template.css file, it will overwrite the current values and you should be set to go.
I want to display a link in a mobile menu that is hidden in the regular page navigation. I removed the “Home” navigation link
<li id="home-menu">HOME </li>
from the regular webpage view in styles.css Line 60, using an alternative to display:none, discussed here: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont.
#home-menu {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Now, I want to enable the "Home" link in the mobile menu list. On Line 176 of styles.css, I tried to display #home-menu,
#home-menu {
display: inline-block;
}
but it will not show in the responsive menu. I am really trying to avoid using !important. I would appreciate learning how to resolve this. My example is at http://nspowers.org/ask/display/
You have a lot going on here, so without going into too much detail I'll suggest a cleaner alternative:
Remove the absolute positioning and its associated rules and instead use display: none; to hide #home-menu initially - then add display: block; at the mobile break point to have it re-appear:
header#topnav nav ul li#home-menu {
display: none; /* Also remove the !important rule from here */
/* position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; */
padding: 0; border: 0;
}
To have home re-appear for smaller devices:
#media only screen and (max-width: 579px) {
header#topnav nav ul li#home-menu {
display: block;
}
}
This seems like a simpler more maintainble solution, plus you won't need to override so many rules.
Read up on selector specificity if you're confused about how it works - see: http://www.w3.org/TR/css3-selectors/#specificity, http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ and https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more.
You're clipping it and have a height and width of 1px, so you need to override these properties as well:
#topnav nav ul li {
float: none;
margin: 0;
clip: auto; //reset clip to not clip
height: auto; //allow height to expand
width: 100%; //matches rest of menu elements
position: relative; //allow to flow above rest of elements instead of overlap first one
}
You also have this at line 117, which is overriding your display: inline-block because of the specificity of the selectors you are using. You can see this in the developer tools:
#topnav nav ul li {
display: block;
float: left;
font-size: 1.7em;
margin-right: 30px;
}