Solved

website on mobile

Posted on 2014-03-05
14
164 Views
Last Modified: 2014-03-09
Hi Guys,

I cant see my site properly on my tablet or iphone, i wonder is it to do with the size of my background image?

www.thedancingsoul.ie
0
Comment
Question by:jonathanduane2010
  • 6
  • 6
  • 2
14 Comments
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39907491
I think that's because your design is not responsive and you do not have a mobile version.
Here's how it looks in my note 2:
capture
You cannot expect the same look on a 19" monitor and on a 4" phone.

HTH,
Dan
0
 

Author Comment

by:jonathanduane2010
ID: 39907602
if it looked like that i would be delighted.....

this is how it looks on my ipad and iphone
photo.PNG
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39907621
Have you checked your site in Safari?
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

Author Comment

by:jonathanduane2010
ID: 39907633
yes...and i think so and i remember it being ok, i will double check....
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907634
Seems to work fine in Safari desktop.

You should look closely at your HTML. Firebug is showing a closing </div> in error (red) just before the closing </header> tag.
0
 

Author Comment

by:jonathanduane2010
ID: 39907641
how can i fix that??
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907650
Take it out if it doesn't belong.

21 errors on the page according to this:

http://validator.w3.org/check?uri=thedancingsoul.ie&charset=%28detect+automatically%29&doctype=Inline&group=0
0
 

Author Comment

by:jonathanduane2010
ID: 39907663
so do i take it out of here somewhere?

this is in the header.php

<header>
		
		<div id="header-top-container">
			<div id="header-top">
				
				<div id="header-top-left">
					<?php
						wp_nav_menu(array( 'theme_location' => 'my_top_nav', 'depth' => 2, 'fallback_cb' => false, 'menu_class' => 'sf-menu', 'container' => 'false', 'container_class' => ''  ));
					?>
</div><!-- close #header-top-left -->

				
				<?php if(of_get_option('header_icons', 'yes') == 'yes'): ?>
				<div id="header-top-right">
					
					<div class="social-icons">
						<?php if(of_get_option('twitter_id')): ?>
						<a href="<?php echo of_get_option('twitter_id'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/twitter.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('facebook_link')): ?>
						<a href="<?php echo of_get_option('facebook_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/facebook.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('tumblr_link')): ?>
						<a href="<?php echo of_get_option('tumblr_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/tumblr.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('dribbble_link')): ?>
						<a href="<?php echo of_get_option('dribbble_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/dribbble.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('skype_id')): ?>
						<a href="<?php echo of_get_option('skype_id'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/skype.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('vimeo_channel')): ?>
						<a href="<?php echo of_get_option('vimeo_channel'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/vimeo.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('youtube_channel')): ?>
						<a href="<?php echo of_get_option('youtube_channel'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/youtube.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('email_address')): ?>
						<a href="mailto:<?php echo of_get_option('email_address'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/email.png" alt="" class="transparent" /></a>
						<?php endif; ?>
					</div>
				</div><!-- close #header-top-right -->
				
				<?php endif; ?>
				
				<div class="clearfix"></div>
			</div><!-- close #header-top -->
		</div><!-- close #header-top-container -->
		
		
		
		<div id="header-gradient">
			
			
				
				
				<?php
					if(of_get_option('display_searchbox', 'yes') == 'yes'):
				?>
				
					<div id="header-logo-right">
						<form method="get" class="searchform" action="<?php echo site_url(); ?>">
							<label for="s" class="assistive-text"><?php _e('Search','progressionstudios'); ?></label>
							<input type="text" class="field" name="s" id="s" placeholder="<?php _e('Search','progressionstudios'); ?>" />
							<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php _e('Search','progressionstudios'); ?>" />
						</form>
						
						
					</div><!-- close #header-logo-right -->
					
				<?php
					elseif(of_get_option('display_searchbox', 'yes') == 'ad'):
				?>
				
					<div id="header-logo-right">

						<div class="advertisement">
							<?php echo of_get_option('header_ad_code'); ?>
						</div>

					</div><!-- close #header-logo-right -->
					
				<?php
					endif;
				?>
			
			<div class="clearfix"></div>
			</div><!-- close #header-logo-container -->
			
			<div id="navigation-<?php echo of_get_option('navigation_style','narrow'); ?>">
				<nav>
					<?php
						wp_nav_menu(array( 'theme_location' => 'my_main_nav', 'depth' => 4, 'fallback_cb' => false, 'menu_class' => 'sf-menu', 'container' => 'false',  'container_class' => ''  ));
					?>
							
					<div class="clearfix"></div>
				</nav>
			</div><!-- close #navigation-narrow -->

		</div><!-- close #header-gradient -->
		
	</header>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907694
Take out line 98 since you are closing #navigation-narrow twice.

</div><!-- close #navigation-narrow -->

Go through the list of errors at the link I posted and eliminate as many as possible.
0
 

Author Comment

by:jonathanduane2010
ID: 39907755
ok i have made the background image smaller and its improved it slightly
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907877
The size of the image could be the problem although I've never encountered that. It's 952 x 6500. Since its such a simple background, I wonder why you couldn't just have a top piece that's maybe 10px tall followed by a filler piece that's 10 px tall and repeats on the Y axis. With css3 you can also put multiple backgrounds on the same container, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
0
 

Author Comment

by:jonathanduane2010
ID: 39907892
Ok i can try it as

10px tall followed by a filler piece that's 10 px tall and repeats on the Y axis? what do i need to edit?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907935
First you need to create two images. Open the original in an image editing program and crop it to the top 10 pixels. For the second image, take a 10 pixel strip, 10 pixels down from the top.

I'll have to check back in when I get home to figure out how to get it on the page.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 455 total points
ID: 39909179
The tested and confirmed fix.
I took your 952 x 6500 background image and created the two 10 pixel tall images attached.
Added this div just above <div class="content-container"> in the markup:

<div class="page-content-top"></div>

I don't know which php file you need to add that too, could be page.php or if you have a custom template page, it might be there.

I made the following changes (in bold) to wp-content/themes/Primero/style.css:

Around line 163,
.content-container {background:url(images/content-bg-fill.png) top left repeat-y; width:952px; margin:0 auto; }
.page-content-top {height:10px; width:952px; background:url(images/content-bg-top.png) top left no-repeat; margin:0 auto;}

Around line 528,
.sidebar-container {background:url(images/sidebar-container.png) 677px 0 no-repeat; }

Might need a tweak or two more to get everything back as it was.

In my iOS Simulator, my mock up of your page now looks like this.Mock upcontent-bg-fill.png
content-bg-top.png
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question