Docs

[denvermilleriii]

Hi there,

Hopefully I can explain my problem clearly and it’s not too complex. I’ve been trying to wrap my head around this for the past few hours…

There is a section of my website that I have three elements I would like to keep responsive and connecting with no margins. I have a Soliloquy Slider in a column to the left and in the right column I have a youtube video stacked above an image.

I’m trying to set up this section so with media screens 1440px and below, it would appear to be full width, 100%.
With media screens 1441px and above, I’d like the width of the section to be 90% (so the images don’t get too big).

One way I’ve tried doing this is turning off the column container and adding the style width:90% to the row. I have then added the following code to the custom css section:

@media (max-width: 1440px) {
.featured-event {
width:100% !important;
}
}

This almost seems to work but when the browser is opened to fullscreen (1920 x 1080) the youtube video and image to the right begin to separate from the slider. It almost looks like the image isn’t large enough to increase in size.

My other idea to accomplish this layout is to turn on the column container for screen sizes 1441px and above (@media (min-width: 1441px). Then have it turn off for screen sizes 1440px and below. (Not sure if this is possible or not.)

I’m totally making this up, but something like this:

@media (max-width: 1440px) {
.featured-event {
column-container: off;
width:100%;
}
}

Here’s a link to my site: http://www.cantstopcreativity.com/dev-ruby/

Here’s a reference of what I’m trying to accomplish with this specific section: http://templesf.com/

Thank you so much! And I’m sorry for any confusion. I’ll try to clarify if needed.

[Rad]

Hi there,

Thanks for writing in.

You should set max width so it won’t be larger than 1440px. Responsiveness only happens between container and content, if content is larger than the container. It doesn’t respond if content is smaller than its container.

If your thumbnail’s original size is 100px, then it will still remain at 100px even if its container is 200px. If we force it, then it will be pixelated.

Please try setting max width on your site’s layout, that can be changed in customizer’s layout settings.

Thanks!

[denvermilleriii]

Hi there Rad,

The max width of my site was 1430px, so I set it to 1440px as you suggested but it didn’t seem to help. I’ve attached a screenshot of my settings below.

I also increased the size of the original image, but I’m still getting a gab between the columns and the bottom of the slider doesn’t match up with the bottom of the image.

[Rad]

Hi there,

It’s not set to 1440px max. Please check the screenshot, the gap appears when the dimension of the container is greater than the total width of the overall content. The overall content width is 1440px, then, if there is a gap, then the container width is greater than 1440px.

Try adding max-width: 1440px; to your section’s row style input.

Thanks.

[Author]

Posts