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)
Related
My toggle menu bar is not showing in mobile view. my website is http://gtcgroups.com/ . When I decrease the window size the menu is not showing. How to fix it. I am currently using WPtouch plugin but its not showing logo of website that's why i want to do it through custom code for toggle menu.I have tried different codes but not working
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
This is because of your written CSS in your custom.css
.header-wrap {
height: 30px;
width: 1200px;
margin-top: 0px;
}
replace it by
.header-wrap {
height: 30px;
width: 1200px;
margin-top: 0px;
max-with:100%
}
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.
When I go to bottom of my website, I can't go back to top with the scrollbar. What might be the problem?
and I also have some errors on the browser console.
#wise-ticker .owl-controls,
#wise-ticker .owl-item {
padding-top: 10px;
}
.wise-ticker-title {
float: left;
display: block;
padding-left: 20px;
}
http://londonpostjournal.com/
Apply this code in your general stylesheet
html {
overflow-y: scroll;
}
Hope this will works for you.
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?
please help solve the problem.
there is a page fiddle. If you compress it to the width(width < 420px), the bottom scrolling appears. and it should not be because it makes the bootstrap adaptive layout:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 110px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 110px;
background-color: #fff;
}
body > .appointment_mobile > .container {
padding: 0px 15px 0;
}
please help remove the lower scrolling.
Be careful when adding padding:0 to your container. You'll break the Bootstrap logic and create that unnecessary margin.
This code is better if you just want to hide the top & bottom paddings.
body > .appointment_mobile > .container.menu_area {
padding-top:0;
padding-bottom:0;
}
.footer > .container.footer_area {
padding-top:0;
padding-bottom:0;
}
TL;DR you shouldn't do any left & right padding modification in the container class.
you can use
body {
overflow-x: hidden;
}
but actual problem is being caused by bootstrap.css:1606. which you can also override in your css (only for width < 480px)
.row {
margin-right: -15px;
margin-left: -15px;
}
EDIT :
You used to many .container class, when you use only one or two, it solves your problem.
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
</div>
You can also see this answer: horizontal scrollbar appearing, row having negative margin
Here is a fiddle working: http://jsfiddle.net/52VtD/11250/
Hope it helps :)
.container > .row {
margin-left: 0;
margin-right: 0;
}
http://jsfiddle.net/52VtD/11248/