[Mahesh]

Hi @ibrahim,

Discard the above styles and use the following CSS instead.
1. For much wider content, please use the following CSS:

@media screen and (min-width: 1225px) {
        .three-columns #primary {
                width: 690px;
        }
        .three-columns #secondary {
                width: 200px;
        }
}
@media screen and (min-width: 1061px) and (max-width: 1224px) {
        .three-columns #primary {
                width: 534px;
        }
        .three-columns #secondary {
                width: 190px;
        }
}
@media screen and (min-width: 1025px) and (max-width: 1059px) {
        .three-columns #primary {
                width: 460px;
        }
        .three-columns #secondary {
                width: 180px;
        }
}
  
@media screen and (min-width: 961px) and (max-width: 1024px) {
        .three-columns #primary {
                width: 520px;
        }
        .three-columns #secondary {
                width: 180px;
        }
}

2. To narrow the space between posts, add the following CSS.

.hentry {
    margin-bottom: 10px;
}

3. For round border in content and sidebar, add the following CSS.

.hentry, .widget {
    border-radius: 10px;
}

4. To remove website column and change background color, add the following CSS.

/* Remove website column */
.comment-form-url {
    display: none;
}
/* Change background color */
#respond {
    background-color: #00ffff;
}

Note: please adjust the style such as border-radius, background-color etc. as required.

Regards,
Mahesh

[Mahesh]

Hi @shana-shanti,

It seems it is in Custom CSS. But if you can’t find it, try adding the following styles in Custom CSS at the bottom and let me know if it helped.

#main {
    background-color: transparent;
}

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

It would be difficult for us to fix after code customization, and where actually the change is causing the trouble. For changing → to … you can go to “Dashboard=> Appearance=> Customize=> Theme Options=> Excerpt / More Tag Settings” and replace → with … and click save.

Regards,
Mahesh

[Mahesh]

Hi @Esaw,

Please post in your site url.

Regards,
Mahesh

[Mahesh]

Hi @andrew90,

It won’t trouble you much setting width to 1260px, but you’ll need to fix the width of the content, sidebars etc in for responsive design.

Regards,
Mahesh

[Mahesh]

Hi @champac,

1. For hiding default search text on click, add the following CSS.

#masthead .search-field:focus::-moz-placeholder {
    color: transparent;
}
#masthead .search-field:focus::-webkit-input-placeholder {
    color: transparent;
}

2. Adding another button to the left along with the first one, you do not need to repeat the whole code I’ve given you above, it won’t work. Just adding modifying a line will fix the issue. In the above code, please Find the following line:
$output = '<a class="custom-btn" href="your-url" title="Title">Your Text</a>';
And Replace it with the following, two link buttons will be displayed.
$output = '<a id="custom-link-1" class="custom-btn" href="your-url" title="Title">Link 1</a><a id="custom-link-2" class="custom-btn" href="your-url" title="Title">Link 2</a>';

3. Add image to the button
I’m a bit confused on what you actually mean. Do you mean background or the icon as image? Please clarify on this.

Let me know if any problem.

Regards,
Mahesh

[Mahesh]

Hi @osPriya,

Catch Responsive provides Featured Content for pages only. Since pages don’t have categories I’m afraid above is not possible in Catch Responsive Free version for dynamic category links. You can upgrade to pro version for more features in Featured Content such as Posts, Post within selected Categories, Widget and Images (with custom links).

Regards,
Mahesh

[Mahesh]

Hi @marga,

Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” and add the following CSS.

.page-id-21 .entry-content {
    font-size: 20px
}

Note: Please adjust the font-size as desired.

Regards,
Mahesh

[Mahesh]

Hi @champac,

For this you’ll need to create a child theme. You can find more details on creating child theme HERE. Then in child theme’s functions.php add the following codes.

function catchresponsive_get_social_icons(){
	if( ( !$output = get_transient( 'catchresponsive_social_icons' ) ) ) {
		$output	= '';

		$output	= '<a class="custom-btn" href="your-url" title="Title">Your Text</a>';

		$options 	= catchresponsive_get_theme_options(); // Get options

		//Pre defined Social Icons Link Start
		$pre_def_social_icons 	=	catchresponsive_get_social_icons_list();

		foreach ( $pre_def_social_icons as $key => $item ) {
			if( isset( $options[ $key ] ) && '' != $options[ $key ] ) {
				$value = $options[ $key ];

				if ( 'email_link' == $key  ) {
					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr__( 'Email', 'catch-responsive') . '" href="mailto:'. antispambot( sanitize_email( $value ) ) .'"><span class="screen-reader-text">'. __( 'Email', 'catch-responsive') . '</span> </a>';
				}
				else if ( 'skype_link' == $key  ) {
					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr( $item['label'] ) . '" href="'. esc_attr( $value ) .'"><span class="screen-reader-text">'. esc_attr( $item['label'] ). '</span> </a>';
				}
				else if ( 'phone_link' == $key || 'handset_link' == $key ) {
					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr( $item['label'] ) . '" href="tel:' . preg_replace( '/\s+/', '', esc_attr( $value ) ) . '"><span class="screen-reader-text">'. esc_attr( $item['label'] ) . '</span> </a>';
				}
				else {
					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr( $item['label'] ) .'" href="'. esc_url( $value ) .'"><span class="screen-reader-text">'. esc_attr( $item['label'] ) .'</span> </a>';
				}
			}
		}
		//Pre defined Social Icons Link End

		//Custom Social Icons Link End
		set_transient( 'catchresponsive_social_icons', $output, 86940 );
	}

	return $output;
}

Note: Please edit the following line in the above code as required
$output = '<a class="custom-btn" href="your-url" title="Title">Your Text</a>';
Replace your-url, title and Your Text with link, title and button text respectively.

Then go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

.custom-btn {
    background-color: grey;
    border-radius: 5px;
    color: #000;
    padding: 3px 5px;
    margin: 5px 0 0 5px;
    display: inline-block;
}

.custom-btn:hover {
    text-decoration: none;
}

Note: You can change the styles above as you desired.

Regards,
Mahesh

[Mahesh]

Hi @Didier,

I tried it on the firefox browser in desktop and resized the screen.

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

No, Catch Flames does not have max-screen width set. But yes .wrapper class has width set to 1260px.
Let me know if I can help you further.

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

Yes → is supposed to be displayed as arrow. It is working fine on our server. It is working both in More Tag Text and Default Display Text in Search. No Custom CSS is necessary for this. Have you made any changes to the code?

Let me know any further.

Regards,
Mahesh

[Mahesh]

Hi @americaontwowheels,

Yes, you can achieve it with Custom CSS. Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.
1. For footer-left-content

.copyright {
    font-size: 15px;
}

2. For footer-right-content

.powered {
    font-size: 15px;
}

Note: Please change the values for font-size as per required.

Regards,
Mahesh

[Mahesh]

Hi @[email protected],

Seems you have found the plugin and you’ve made it working to fix your issue.
Have a nice day!

Regards,
Mahesh

[Mahesh]

Hi @DJ,

Thank you for your appreciation.

Regards,
Mahesh

[Mahesh]

Hi @Cattext,

Thank you for your appreciation.
Have a nice day.

Regards,
Mahesh

[Mahesh]

Hi @rflores,

That’s great! 🙂
Thank you for your appreciation.
Have a nice day.

Regards,
Mahesh

[Mahesh]

Hi @Jos,

Thank you for your appreciation.

Regards,
Mahesh

[Mahesh]

Hi @americantwowheels,

That’s great. Have a nice day!

Regards,
Mahesh

[Mahesh]

Hi @shana-shanti,

The background issue is because of the CSS that you have in your Custom CSS:
#main { background-color: #ffffff; }
Please find and remove it from Custom CSS, then you’ll have your custom background back.
And for the sliders, it seems some plugins is causing the issue, please try deactivating one by one and check it.

Let me know further.

Regards,
Mahesh

[Author]

Posts