Split theme - reduce mobile only Intro height

Hi just to point out Im inexperienced and have not got a live site -

I am adding CSS to various pages in the Split theme but the mobile view is too deep,

#intro {
height: 400px;
}

Controls the height of the main background image (banner) but I need to only reduce the height of the mobile view, and help would be welcome.

I have another question in terms of a stacks text page - I want to narrow the text through padding but this also narrows the mobile view which I want to avoid - any help again - thanks

Hi Peter, and welcome to the forum.

It’s always best practice when wanting help with styling(CSS) to include a link to at least a test page if you can. That way, someone good with web tools can simply give you some code to try without doing much more than looking at your page.

If you don’t provide the link then they have to take the time to create a project that uses the same theme as you.

Unfortunately I wouldn’t know how to do that - I haven’t got a host yet, i’m designing as a favour for my son who has to set up his own business due to covid redundancy. It’s six years since I produced a site so I’m rusty. I have a number of issues with this theme including LOGO size is tiny and SLOGAN is missing completely even from the source? Best I can do is show the source.

Sorry here pasted relevant source, no mention of slogan!
<!doctype html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Ubuntu:300,400,700|Merriweather:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="consolidated-10.css" />
	 	


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<title>Home | </title>

<style type="text/css" media="all">#intro #intro-background { background: url(resources/stevevarious-3.jpg) no-repeat center center; background-size: cover; }

.main-nav { font-size:18px; }
#intro {
height: 400px;
}

		<link rel='stylesheet' type='text/css' media='all' href='files/stacks.css' />
	<link rel='stylesheet' type='text/css' media='all' href='files/stacks_page_page10.css' />
    <script type='text/javascript' charset='utf-8' src='files/jquery-2.2.4.min.js'></script>
    
    
    
	
	<script type='text/javascript' charset='utf-8' src='files/stacks_page_page10.js'></script>
    <meta name="formatter" content="Stacks v4.0.4 (4813)" >
	<meta class="stacks4 stack version" id="com.weavium.stacks.Sidebar" name="Sidebar" content="1.0.2">
	<meta class="stacks4 stack version" id="com.weavium.stacks.Sidebar_Item" name="Sidebar Item" content="1.0.0">
	<nav class="main-nav">
			<ul><li><a href="./" rel="" id="current">Home</a></li><li><a href="page-3/" rel="" class="parent">Our Services</a></li><li><a href="contact-form/" rel="">Contact Us</a></li></ul>
	</nav> <!-- main-nav -->
</header>

This is the current home page relating to the source above - small logo will not resize and no slogan

Sorry missed the section with logo

	<nav class="main-nav">
			<ul><li><a href="./" rel="" id="current">Home</a></li><li><a href="page-3/" rel="" class="parent">Our Services</a></li><li><a href="contact-form/" rel="">Contact Us</a></li></ul>
	</nav> <!-- main-nav -->
</header>

<section id="intro">
	<div id="intro-background"></div>
	<div id="intro-tagline">
		<h1></h1> 
	</div> 
</section> 

<main class="content">
	<section id="subheader">
	
			<nav class="secondary-nav">
				<ul></ul>
			</nav> <!-- secondary-nav -->
	</section>
	
	<div class="container">
	<aside id="aside" role="complementary">
		<div id="sidebar">
				<h3 class="sidebarTitle"></h3>
				<p style="text-align:center;"><br /></p>
				<div id="archives">
				
				</div><!-- archives -->
		</div><!-- sidebar -->
	</aside><!-- aside -->
		<div id="contentContainer">

    "Protecting you and your environment"

      Quick Pest Management is an independent family run company with over 25 years of experience in pest control and wildlife management. We pride ourselves on providing a fast, friendly and highly professional service to all our clients. We hold a wide range of qualifications from major organisations such as the British Pest Control Association, Royal Society for Public Health and Lantra. This provides the reassurance you need when looking for a company you can trust.

      We are proud to have been responsible for teaching pest control technicians across the UK to help raise the standard and awareness of environmentally friendly methods of pest control and specialist wildlife management techniques.

      If you have a pest issue please do not delay, call us immediately.

    Try this CSS:

    #logo img {
    width: 50px;
    }
    

    Change the size to what you want.

    Okay,
    Not sure what you’re looking to do here. The #intro is currently only 300px height on mobile (the default) it changes to 400px on med size @768px scren width) and to 500px on large sizes (1170px).
    so here is the defaults in CSS:

    #intro {
     height: 300px;
    }
    @media only screen and (min-width: 768px) {
        #intro {
            height: 400px;
            margin-top: 70px;
        }
    }
    @media only screen and (min-width: 1170px) {
        #intro {
            position: fixed;
            top: 70px;
            left: 0;
            width: 100%;
            height: 500px;
            margin-top: 0;
        }
    }
    

    Doug thanks for this and the intro height worked perfectly, in terms of the logo the size is limited to 100px it seems, therefore the logo won’t go bigger than that which on a laptop looks very small, not too bad on a mobile but I may have to consider trying to solve the missing slogan problem and ditch the logo.

    This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.