[nitani10]

Hello,
My website (https://project555.org) via pc looks generally like how I wanted it to look. However, it has severe issues with my galaxy s10e where half of the page is cut off and zooming out just shows gray space matter. The issues looks differently in different pages, but it is the worst on the homepage (see examples below)

Screenshot example 1 – homepage

Screenshot example 2 – homepage

The weird part about all of this is that it looks differently depending on the device. Someone else I know accessed the website via their apple device and while some lettering was cut off – it was not neerly as bad as how it appears on my own galaxy s10e.

Please let me know what I should do!

Additional Context

1) I have placed various css codes throghout the site which I’ve pasted below this section
2) I deleted some php code – specifically in the functions.php section (i.e. the scrollbar in the homepage)
3) I am using nearly 40 plugins and would be happy to share their names if that helps!

I really appreciate any and all help in fixing this issue!!

CSS Code in the Customizer section

.site-navigation a {
    color: #f23456 !important;
}

#page {
	margin-left: auto;
	margin-right: auto;
}

#content {
    padding-top: 0;
		padding-bottom: 0;
} 
#content .entry-header {
    display: none;
}
.site-content {
  margin-top: -28px;

}

.site-info {
	display: none
}

.page-id-3892 .top_bar {
	display: none;
}

page-id-3892 .footer_bar {
	display: none;
}

/* Decrease Header Height */
.sticky-header .site-content {
    padding-top: 55px !important;
}

/* Decrease Footer Height */
.site-footer {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}
	
/* Widget */
#tertiary .wrapper .widget-column > .widget{
	max-height: 1vh;
	padding-top: 0;
}
	#tertiary .wrapper .widget-column {
		max-height: 0;
	padding-top: 0;
	}
	

	
	#text-2 {
		height: 1vh;
	}
	#tertiary {
		background-color: #2b2b2b;
		height: 14vh;
	}

#tertiary, #tertiary .widget {
    padding: 0;
}

CSS Code in Yellow Pencil

Global

.fullscreen{
	overflow: hidden;
}

/* Link */
#menu-top-navigation > .menu-item > a{
	font-weight:600;
}

/* Link */
#menu-top-navigation .sub-menu a{
	font-weight:600;
}

/* Site generator */
#site-generator{
	display:none;
}

/* Entry Footer */
#main .hentry footer{
	display:none;
}

#page{
	overflow-x:visible;
}

single page (homepage)

/* Division */
.n2-ss-slide-19 .n2-ss-layer .n2-ss-section-main-content{
	left:0px;
	top:-64px;
}

/* Link */
#menu-top-navigation .sub-menu a{
	font-weight:600;
}

/* Heading */
#page-titlebar h1{
	display:none;
}

.ht-main-header{
	display: none;
}

/* Page titlebar */
#page-titlebar{
	display:none;
}

/* Column 3/12 */
#sidebar-primary{
	display:none;
}

/* Column 9/12 */
#main{
	padding-top:0px;
	padding-bottom:0px;
}

/* Site generator */
#site-generator{
	display:none;
}

/* Tertiary */
#tertiary{
	margin-bottom: 0px;
}

/* Entry Footer */
#main .hentry footer{
	display:none;
}

#colophon{
	min-width:1600px;
	max-height:0px;
	box-sizing:content-box;
	min-height:0px;
	margin-left:-40px;
	bottom:28px;
}

[Skandha]

@nitani10: Hello there,
This may be due to the plugins you are using. Can you please deactivate all your plugins and check your site again?

Kind Regards,
Skandha

[nitani10]

@skandha: so it likely is a plugin issue – I jusrt disactivated all of them and the mobile system no longer had that issue. I tried activiating one at a time but the phone version took over 10 minutes for one of the plugins to reappear as opposed to the pc version which was much quicker.

If I share the list of plugins, would you be able to check on your end which one might be causing this issue? I’m also happy to give temporary admin access if that helps.

Here is the list of plugins: https://nitan.neocities.org/plugins.html

Thank you in advance for all of your time and help!

Nitan

[nitani10]

UPDATE – I used a Caching plugin to quickly see the changes on my phone and computer. It’s the yellow pencil plugin which leads me to believe that it’s the code that I had specifically put into it. I took out the CSS code from it that was global and put it on the customizer section of the website.

Now the issue (which I fixed with the yellow pencil plugin) is the gynormous footer that appears in the homepage. Besides the homepage, the footer also does not extend fully from right to left on all pages (i.e. the About Us page or the resource hub page). What is the universal CSS code that I can use to make the footer identical on all pages and look like the “contact us” page?

My website domain is project555.org

Thank you!!

[Skandha]

@nitani10: Hello there,
The footer#colophon div seems to be inside #content div in other pages whereas on the Contact Us page footer#colophon div is outside #content div and that is how it should be. I think the footer issue maybe due to the smart slider plugin you are using.

Kind Regards,
Skandha

[Author]

Posts