Site icon Catch Themes

Mobile Responsiveness Issues – Galaxy S10e

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;
}
Exit mobile version