Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1140130

    hello I have 3 questions/issues (details, logins, URLs in private)

    1) Header Widget Styling (see private)
    I would like to make phone icon, phone number and address (located in top right corner) as on this website (see private)

    2) Background Image Position (see private)
    I would like to make background image on this page to be positioned to the top and resized correctly

    3) Also how do i hide header widget on the mobile?

    Screenshot

    View post on imgur.com

    • This topic was modified 5 years, 2 months ago by anristudio.
    #1140410

    Hey onastvar,

    Thank you for contacting us.

    Please open different tickets for unrelated issues. It will avoid confusion.

    1. Add the below CSS to Enfold > General Styling > Quick CSS

    #header .textwidget strong {
    	font-size: 32px;
    	line-height: 1.5em;
    }
    
    #header .textwidget {
    	font-size: 12px;
    	line-height: 1.2em;
    }

    2. Please use a color section element and set a background image that suits your design style.

    3. To hide the header widget on the phone:

    @media only screen and (max-width: 480px) {
    #header .textwidget { display:none; }
    }

    Best regards,
    Vinay

    #1156548

    Three questions/issues below about header widget.
    I have it working correctly on Desktop PC/MAC and iPhone

    1) iPhone has minor issue how do I align logo in the middle?
    i have smaller version of logo for mobile version)

    2) I would like to make LOGO, PHONE ICON & PHONE NUMBER & ADDRESS
    (located in top right corner) display on iPad. Can original logo be used or I need
    to create another version of LOGO for iPad?

    3) Also, regarding same header widget (LOGO, PHONE ICON & PHONE NUMBER & ADDRESS)
    how do I adjust space between PHONE NUMBER and ADDRESS? (Please see live URL below)

    Please if possible assist with CSS for iPad.

    New login credentials and URL in private below.

    • This reply was modified 5 years ago by anristudio.
    #1158856

    Hey!

    Sorry for the late reply, I have changed the structure of the widget text a bit so we can target it using CSS and add the below CSS to your child theme style sheet which can be accessed from Appearance > Editor > Child theme > Styles.css

    There is not enough space on the tablet device to add the address and it will overlap the logo. Please take a look at the site and let us know if you have any questions.

    /* Logo and widget */
    
    	#top #header .widget .wp-img {
    		margin: 0 10px 0 0;
    	}
    	#top #header .widget .widget-title {		
    		font-size: 3em;
    		font-weight: bolder;
    	}
    	#top #header .widget h2 {
    		margin-top: -10px;
    		line-height: 1.5em;
    	}
    	#top #header .widget {	
    		position: absolute;
    		max-width: 300px;
    		right: 0;
    		text-align: right;		
    		transform: scale(.75);
    	}
    	#top #header .logo {
    		display: flex;        
    		width: 65%;
    		padding-right: 20px;	
    	}
    	#top .logo a,
    	#top .logo a img {
    		align-items: center;
            justify-content: start;		
    	}

    Best regards,
    Vinay

    #1159512

    Thank you Vinay.
    Just one small issue, address below the phone number has 210 on second line, should be on 1st line after SUITE. How to adjust that?

    #1159605

    Hey!

    I have adjusted the address as per your request. If you like to make further changes please feel free to play with the widget text in Appearance > Widget > Header

    You can control the widget width by adjusting the max-width property in Appearance > Editor > Child theme > styles.css

    #top #header .widget {	
    		max-width: 350px;
    }

    Regards,
    Vinay

    #1159615

    Vinay Thank you so much!

    #1159657

    Hi onastvar,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.