Width not adjusting because of sidebar

  • Resolved Sami S

    (@sami-sanpakkila)


    4 years, 1 month ago

    Hi!

    This is a bit of a complicated issue and I don’t quite understand all that might be involved in fixing this. Hopefully you can make sense of my explanation. ??

    I’m having a problem with my site and the Smart Slider 3 adjusting to the responsiveness of my website.

    The theme is self built and has a sidebar that is 260px wide. When I insert the slider on my page and turn off “Force Full Width” the slider fills the expected area without flowing over to the black sidebar area on the left. See image here: https://www.dropbox.com/s/6bxazvoi92tb8b9/Screenshot%202020-10-19%20at%2016.38.12.png?dl=0

    However when resizing the browser window the responsiveness is lost as the Smart Slider takes into account the 260px width of the sidebar before it starts to resize the slider. See image here how resizing the browser cuts the slider and doesn’t let the other elements on the page resize as it thinks the sidebar’s 260px included in the width: https://www.dropbox.com/s/niw1w3sb9czw28n/Screenshot%202020-10-19%20at%2016.40.30.png?dl=0

    When I set the slider to force Full Width it fills over to the the black sidebar area but the responsiveness works as expected. See image here: https://www.dropbox.com/s/lbviubqkd9u2x8y/Screenshot%202020-10-19%20at%2016.34.48.png?dl=0

    I’m doing tests on the Smart Slider on my staging site so it is not live but the website I’m trying to insert it on is here: https://www.fonal.com

    I’ll also include the CSS code that creates the sidebar and perhaps is cause to the issue? 

    /** STRUCTURE ***/
.flex-container {
	display: flex;
	flex-direction: row;
	width: 100%;
 	max-width: 1600px; 
	background-color: #eee1cd;
}
.flex-sidebar  {
	order: 1;
	width: 260px;
	background-color: #0b0b0b;
	flex: none;
	padding-top: 110px;
}
.flex-contentarea  {
 	width: 100%;
	order: 2;
	padding-bottom: 45px;
}
.flex-sidebar #secondary section.widget H2.widget-title  {
	color: #FFF;
	text-transform: uppercase;
	background-color: #373737;
	margin: 0;
	width: 100%;
	font-size: 1rem;
	font-weight: 700;
	padding: 0px 0 0 14px !important;
}
.flex-sidebar #secondary  ul  {
	list-item: none;
	color: #c8b78d;
	margin: 10px 0 0 0;
	padding: 0;
	text-transform: uppercase;
	line-height: 1.2
}
.flex-sidebar #secondary  ul li {
	margin: 0;
	padding: 0 0 0 15px;
	color: #c8b78d;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2
}
.flex-sidebar #secondary  ul li a {
	margin: 0;
	padding: 0;
	color: #c8b78d;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1.2
}
.flex-sidebar #secondary  ul li a:hover, .flex-sidebar #secondary  ul li.current-cat a {
	color: #fff;
}
.flex-sidebar a:hover {
	color: #fff;
}
.content-area {
	padding-top: 24px;
}
    • This topic was modified 4 years, 1 month ago by Sami S.
    • This topic was modified 4 years, 1 month ago by Sami S.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Ramona

    (@nextend_ramona)

    Hi @sami-sanpakkila

    Can you create a page where you publish a Smart Slider 3 slider so that I could check out how it behaves? The page can be just a dummy testing page. I’m just interested in seeing the slider’s codes when the resizing happens.

    Thread Starter Sami S

    (@sami-sanpakkila)

    Of course, great idea. ?? Here you go: https://fonal.com/test/

    Ramona

    (@nextend_ramona)

    Hi @sami-sanpakkila

    Thanks! Can you try changing the width at this code.

    .flex-contentarea  {
 	width: 100%;
	order: 2;
	padding-bottom: 45px;
}

    to width: calc(100% - 260px);? In my browser’s inspector view, it seemed to solve the problem.

    So the code should look like this:

    .flex-contentarea  {
 	width: calc(100% - 260px);
	order: 2;
	padding-bottom: 45px;
}
    Thread Starter Sami S

    (@sami-sanpakkila)

    Hi

    Thanks! It solves the problem but only until a new breakpoint comes. If you resize further or go to mobile view there’s an extra 260px empty area on the right side. Can you see that?

    Ramona

    (@nextend_ramona)

    Hi,

    Try adjusting the width (like setting it back to 100%) at the same media query where you add display: none; to the .flex-sidebar element.

    A simple .flex-contentarea { width: 100%; } should solve it.

    Thread Starter Sami S

    (@sami-sanpakkila)

    Excellent, that seems to have solved all my issues. Thank you so much! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Width not adjusting because of sidebar’ is closed to new replies.