I've manage to hide the top bar and menu on wordpress page but white space is being displayed on mobile devices at the top of the page.
https://iroae.com/test
I'm using this CSS
.page .site-header {
display: none;
}
.page .site-top-bar {
display: none;
}
How can I hide this white space on mobile devices?
Edit your style.css link : [https://iroae.com/wp-content/themes/shopkeeper/css/styles.css][css file]
so in your file directory path will be : wp-content/themes/shopkeeper/css/ and file will be style.css
find this:
#page_wrapper.sticky_header {
padding-top: 50px; }
and set padding-top: 0 ;
#page_wrapper.sticky_header {
padding-top: 0; }
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I am trying to reduce the spacing between the images and the paragraphs of my website. I have tried to remove the space through the draft version, but it appears differently on the actual browser version. Here is the link to the website for reference:
https://pprggw.wordpress.com/partisian-views/
Your CSS is showing both a margin-bottom of 27px and of 24px on your p tags. Remove both of those in your css and you'll see much less space between the images and the text.
If you can access css for p and .alignnone you can modify it directly
or if you cant Add following css
#primary .alignnone {
margin-top: 0;
margin-bottom: 0;
}
body #primary p {
margin-bottom: 0;
}
if it's working you can try to remove #primary and check if it works.
or if you want is not limited to #primary div make these styles important
for example
.alignnone {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body p {
margin-bottom: 0 !important;
}
I have been searching for a while trying different methods to try and remove white space between my images on the home screen on my mobile version. It only occurs on my mobile version. My url for the site is below:
https://athleteperks.co.uk
I also have a thin small white gap between two images on my home screen which wold also be great to remove. It would be great if someone could help.
thanks
If you are referring to the bottom 5 images before the footer there is padding that needs to be removed on mobile state 767 like so:
.fw-row .blog-grid-items {
padding:0;
}
.blog-grid-items .blog-item.col-sm-sf-5 {
padding:0;
}
Adding the above CSS makes the last 5 images full width on mobile and eliminates white space.
Also removing the below CSS eliminates the small 1px gap between the two images on your home screen:
.row:not(.fw-row) .spb_swift-slider .swift-slider {
margin-left: 0;
}
Edited Answer
The below CSS needs to be added to your stylesheet in order to remove the white space from the images on mobile:
.spb_text_column, .spb_content_element {
margin-bottom: 0;
}
/* Mobile media query */
#media (max-width: 767px) {
.swift-slider-outer {
height: auto !important;
}
}
In order for the above media query to work you must have in your head file the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
here is the code if you want to rid out the space in between the 5 images in the same row:
.col-sm-sf-5 {
width: 25%;
padding: 0px;
float: left;
}
.row:not(.fw-row) .spb_swift-slider .swift-slider {
margin-left: 0px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.blog-grid-items .blog-item {
margin: 0 0 0px;
height: 330px;
padding-top: 0;
}
If you want to modify the design only for a mobile version, with resolution 1024 px, add this code and put inside this code your new classes above.
#media only screen and (max-width : 1024px) {
.classname {
/* other styles here */
}
}
I'm trying to edit the colors of my user profile page on my site www.wastelandgamers.com/user-profile I would like for the fields tat are blue to be white instead and the text in those fields to be black instead of white.
I am able to change them when I use the developer tools through Google Chrome and get the desired look, however, I am not able to find the HTML doc that I need to change in order to get the look I want. I have searched through nearly all of the relevant site files using file manager through cPanel with no luck.
Here are a screen captures of before and after the color change using developer tools.
Before code change:
After code change:
Code I need to change (.entry-content towards bottom)
.tml-profile {
max-width: 100%;
}
.tml-profile .tml-form-table {
border-collapse: collapse;
}
.tml-profile .tml-form-table th,
.tml-profile .tml-form-table td {
display: block;
vertical-align: middle;
width: auto;
}
.tml-profile .screen-reader-text,
.tml-profile .screen-reader-text span {
height: 1px;
left: -1000em;
overflow: hidden;
position: absolute;
width: 1px;
}
.tml-profile .wp-pwd {
text-align: right;
}
.tml-profile .wp-pwd .dashicons {
font-size: 1em;
line-height: 1;
height: 1em;
width: 1em;
vertical-align: middle;
}
.tml-profile #pass-strength-result {
margin: 0.5em 0;
}
.hidden,
.no-js .hide-if-no-js,
.js .hide-if-js {
display: none;
}
#media screen and (min-width: 768px) {
.tml-profile .tml-submit-wrap input {
width: auto;
}
}
.entry-content tr th, .entry-content thead th {
color: #cbcbcb;
background-color: #fff;
}
I am using the Parabola theme for my site and Theme my login for the profile page.
If anyone knows why I'm unable to find the file I need to edit or of another way to make the change I would really appreciate the help! If you need any more information let me know.
I'm not a fan of WordPress themes, but some of them do allow for custom CSS. Google found me this:
we have created a special input field right in theme’s settings page.
You’ll find it by going to Appearance > Theme Settings, then expanding
the Miscellaneous Section by clicking on it. The Custom CSS field is a
bit further down.
You should see this: https://www.cryoutcreations.eu/wp-content/uploads/2012/11/themesettings-customcssjs.png
In this area (indicated by the blue box), you will want to PRECISELY recreate the code you have circled above (http://i.stack.imgur.com/00cxb.png) EXCEPT for changing the #colour to your desired colour.
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…