Adding site wide header banner

This topic contains 11 replies, has 3 voices, and was last updated by  Cheryl Johns 6 years, 3 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • December 29, 2018 at 10:34 am #460456

    Cheryl Johns
    Expired Member
    Post count: 156

    I am trying to add a double banner on to my site- the easiest way I have found is to add into the Search Bar widget which is pretty much site wide. I need to keep the current proportions of the banners (each 750 wide) and this widget space isn’t wide enough as at present it stacks the banner one on top of the other in a wonky fashion unless i make the banners quite a bit smaller! Is there a way I can increase the width of this widget. Thanks

    December 29, 2018 at 11:17 am #460465

    Guust
    Moderator
    Post count: 29970

    It may be easier if we can see the URL of the page you are thinking about.
    Widgets are normally just 100% wide.
    A fixed 750 may give trouble on mobiles.

    December 29, 2018 at 4:54 pm #460519

    Cheryl Johns
    Expired Member
    Post count: 156
    This reply has been marked as private.
    December 29, 2018 at 5:02 pm #460520

    Kor
    Moderator
    Post count: 16516

    Hi Cheryl,

    Thanks for your reply. We’ll need to first fix the alignment issue on desktop using the custom CSS code below. Then you can inspect it using your mobile device and see if it displays correctly. 

    

    .textwidget.custom-html-widget {
    text-align: center;
}

.alignnone.wp-image-843 {
    display:none!important;
}
    

		
	
    


    

			
				

    

	
    

		December 30, 2018 at 12:57 am

		
		#460573

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		December 30, 2018 at 12:43 pm

		
		#460663

		
		
		
	
    


    


    

	
    

		
		
    Cheryl Johns
    Expired Member
    
		
		
     Post count: 156
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		December 30, 2018 at 3:16 pm

		
		#460671

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Cheryl, 
    

    Thanks for your reply. Could you reverse the changes? I think I know what you needed there. You want to display both banners on a single line on desktop and a double line on mobile devices(smaller screens). 
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		December 30, 2018 at 7:21 pm

		
		#460698

		
		
		
	
    


    


    

	
    

		
		
    Cheryl Johns
    Expired Member
    
		
		
     Post count: 156
    
	
    

	
    

		
		
    There was not really any specification or thought for the mobile device- the most important is to be able to show the two banners on a single line in desktop format. 
    

    By reverse the changes do you mean remove the earlier added CSS code to remove the need for the spacer? And then what would i need to do to be able to upload to the Search Bar widget in the preferred format at the current size? 
    

    Thanks  
    

		
	
    


    

			
				

    

	
    

		December 31, 2018 at 4:24 am

		
		#460749

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Cheryl, 
    

    I mean to reverse the changes you’ve done here. 
    

    If I reduce the size of each banner from 750 x 95, to 600 x 76 then it shows fine in the Search Bar widget
    

    Just upload the 750 x 95 banner images back into the widget and I’ll try some custom CSS code. 
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		December 31, 2018 at 9:19 am

		
		#460778

		
		
		
	
    


    


    

	
    

		
		
    Cheryl Johns
    Expired Member
    
		
		
     Post count: 156
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		December 31, 2018 at 7:03 pm

		
		#460869

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Cheryl, 
    

    Try using the custom CSS code below and see if it’s what you’re looking for.
    

    

    @media only screen and (min-width: 1024px) {
  img.alignnone.wp-image-2921.size-large {
  display: inline-block;
  width:49%;
}

img.alignnone.wp-image-3106.size-full {
    display: inline-block;
    width:49%;
}
.search-bar.widget-area .wrap{max-width:100%!important;}
}
    

		
	
    


    

			
				

    

	
    

		January 3, 2019 at 11:36 am

		
		#461282

		
		
		
	
    


    


    

	
    

		
		
    Cheryl Johns
    Expired Member
    
		
		
     Post count: 156
    
	
    

	
    

		
		
    Perfect- that seems to have worked. Thanks, Kor!
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 12 posts - 1 through 12 (of 12 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket
				

			

		

		
	
	


			

			


		
	


		

	

	


















	
	
			
			
			
			
                        
            
            
                
                

                    

                        20% Discount Offer
                        
                        
                    

                    

                        Hurry! Get your 20% discount before it expires.
                        Get 20% Discount