[LMKWeb]

I’m working on a site that I’ve set to use the Wide layout. However, now the right column jumps below the main content at 1024px width, and I’d like it to maintain the right column at that width and possibly a bit below. What’s the best way to adjust where it changes from 65% to 100% for primary column width? Should I create a child theme or can this be done using the custom CSS overrides?

[Theme Horse Support Team]

Hi LMKWeb
Though you set the wide or narrow layout the menu will cover the 978px and it will be center aligned. We have designed the theme that way.
2. For the wide layout the background will be ineffective as the content are will cover the whole width. The background will only be used if narrow layout is selected.
3. In our demo we are using the narrow layout.

the default size for narrow layout and wide layout is this

add_image_size( 'slider-narrow', 1038, 460, true ); 		// used on Featured Slider on Homepage Header for narrow layout
add_image_size( 'slider-wide', 1400, 460, true );  

it is inside attitude-> functions.php

Regards
Sunil

[LMKWeb]

Hi, Thank you for your response. However, I don’t believe that answers my question. I set the template as wide intentionally, since we don’t want a background and want the menu to span the full screen width.

What I’m looking for is where to adjust the responsivity of the main and right-hand columns. The main column goes from 65% width to 100% width, and I need to know where to adjust the breaking point – I want it to be smaller than it currently is. So if it currently switches at 980px, I want to change it to 820px or even 768px.

I’m not concerned about the slider, that’s working fine right now.

[Theme Horse Support Team]

Hi LMKWeb,

There is a following break point for responsiveness

@media only screen and (max-width: 1078px) 
@media only screen and (max-width: 767px) 

In style.css line number 2012 there is

#primary, #secondary,
#colophon .widget {
	float: none;
	margin-left: 0;
	width: 100%;
}

remove line #primary, #secondary, which is a break point that makes column and sidebar 100% and you will see the same view as desktop view. If you want to break this 768px after paste below CSS code under this @media only screen and (max-width: 767px)

#primary, #secondary {
	float: none;
	margin-left: 0;
	width: 100%;
}

before editing core CSS file please consider about child theme. If you edit the core CSS file your changes will be lost when you update a theme.

Thank you!

Regards,
Theme Horse

[Author]

Posts