Responsive Header Image and Site Title

  • Resolved frommellen

    (@frommellen)


    8 years, 1 month ago

    I have created a website, fashionworks.com.au, using WordPress hosted by Go Daddy. The theme I have used is Lyrical which is a child of the Primer theme. I have learnt from other posts in this forum that Primer is a responsive theme. However, my header image and site title do not re-size at all when viewed on other devices. I am very new to WordPress and website development so would very much appreciate any advice to help me make the image and title look better on smaller screen sizes.

    Thank You.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @frommellen, I’m happy to help.

    There is custom CSS on your site that appears to be breaking the Site Title and Hero widget area on mobile/tablet device sizes:

    @font-face {
			font-family: 'CalifornianFB';
			src: url('https://fashionworks.com.au/wp-content/plugins/font/font_files/CalifornianFB.eot');
			src: url('https://fashionworks.com.au/wp-content/plugins/font/font_files/CalifornianFB.woff') format('woff'),
			url('https://fashionworks.com.au/wp-content/plugins/font/font_files/CalifornianFB.eot') format('eot'),
			url('https://fashionworks.com.au/wp-content/plugins/font/font_files/CalifornianFB.ttf')  format('truetype');
		}
PICK AN ELEMENT NOW - or type CSS selector(advanced) {
font-size: 30px !important;
color: #444 !important;
}
DIV DIV DIV.hero-inner ASIDE.widget.widget_text H2.widget-title.ui-draggable.ui-draggable-handle {
}
HEADER DIV DIV.site-title-wrapper H1.site-title A {
font-size: 80px !important;
top: 7px !important;
left: 64px !important;
position: relative !important;
color: #05294d !important;
font-family:'CalifornianFB' !important;}
DIV DIV H3.fl-callout-title SPAN A.fl-callout-title-link {
color: #05294d !important;
}
DIV DIV DIV.hero-inner ASIDE.widget.widget_text H2.widget-title {
font-size: px !important;
color: #05294d !important;
top: 169px !important;
left: -514px !important;
position: relative !important;
font-family:'CalifornianFB' !important;}
DIV DIV ASIDE.widget.widget_text DIV.textwidget P {
top: 178px !important;
left: -494px !important;
position: relative !important;
}
DIV DIV DIV.page-title-container HEADER.page-header H1.page-title {
color: #05294d !important;
font-size: 40px !important;
font-family:'CalifornianFB' !important;}
DIV DIV DIV.fl-widget DIV.widget.wpcw-widgets.wpcw-widget-contact H2.widgettitle {
color: #05294d !important;
font-family:'CalifornianFB' !important;}
DIV DIV UL LI.has-label STRONG {
color: #05294d !important;
}
DIV UL LI.has-label DIV A {
color: #05294d !important;
}

    When this custom CSS is removed the content is responsive as it should be:

    Thread Starter frommellen

    (@frommellen)

    Thanks for your help, Frankie. I believe that the Custom CSS has been supplied by the Fonts plugin which I downloaded in order to be able to change the font type and size of the Site Title. I’m afraid that I don’t know how to remove this Custom CSS. Do I uninstall the plugin and will that remove this code?

    @frommellen Yes, try deactivating the plugin and see if the issue is resolved.

    Also, you might be interested to know that Primer has controls for changing Fonts out-of-the-box.

    Font controls

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive Header Image and Site Title’ is closed to new replies.