Docs

[Eric]

Hey I’m having an issue with the responsiveness of one of my images. The image itself looks great when the browser is full-width (see screenshot ‘S1’), and as you can see from the screenshot, the image hugs the bottom of the row, which was achieved by adding margin-bottom:0; to the image’s ‘style’ section. Now the issue is that as my browser gets smaller, the image begins to lift up (as you can see from screenshot ‘S2’). This also occurs anytime the text in the left column surpasses the image in the right column (as you can see from screenshot ‘S3’).

The first thing I want to know is whether or not it’s possible to alter the responsiveness for that particular image so that it would create more space above the image (rather than below it) whenever the text in the left column surpasses the image on the right. I’m not sure if that’s possible but that would also allow me to keep the image fixed on the bottom regardless of the browser size, which would be ideal.

If it’s not possible, is there a code that I could add to have the image collapse right before the image begins to raise? That wouldn’t be my preferred solution but that would also solve my problem.

Also, I don’t know if this thread would be applicable to what I’m trying to do, but I noticed that they came up with a different solution: https://community.theme.co/forums/topic/image-align-at-bottom-of-column-and/page/2/

In any case please let me know what you think is the best option based on what I’m trying to achieve. Thanks in advance!

[Eric]

This reply has been marked as private.

[Lely]

Hello Eric,

Please add position: relative; on the section style field. Then add the following on the columns style field with the image: position: absolute; right: 0; bottom: 0;

See this:http://screencast-o-matic.com/watch/cbnnnuQS6S

Hope this helps.

[Eric]

Hey thanks for the suggestion but unfortunately it didn’t work. Although it lines up well on the bottom, it creates a number of issues at the top. As you can see in screenshot S1, instead of creating spacing at the top, the image now overlaps over the other section, which blocks the text the text and title. Also, another problem is that now instead of collapsing to the bottom on mobile, the image now just remains in the background (as you can see in screenshot S2), which is also problematic.

Any other ideas? Thanks again for your help.

[Rue Nel]

Hello There,

I have spent some time looking for the page where in I could see the outcome as shown in your screenshot. Regretfully I haven’t found it. Could you please supply which page is it?

Meanwhile, to have an understanding how the background images works, especially in the sections, please check this thread: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

Please let us know how it goes.

[Eric]

This reply has been marked as private.

[Eric]

This reply has been marked as private.

[Nabeel A]

Hi again,

Instead of adding it as an image. use it as a background image for that section. To do this, remove the image first and then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.page-id-153 #x-section-8 {
    background-image: url(http://ghostswithtypewriters.com/wp-content/uploads/2016/12/17-web-copy.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: 90% 0 !important;
}

Let us know how this goes!

[Eric]

This reply has been marked as private.

[Rad]

Hi there,

How about this

.page-id-153 #x-section-8 {
    background-image: url(http://ghostswithtypewriters.com/wp-content/uploads/2016/12/17-web-copy.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover  !important;
    background-position: center center !important;
}

The background image size should change as the content change. Else, there will be blank space. Working with background images are quite tricky since some setting and user requirements are a bit contradictory. Like they wish to respond but they don’t like the size of it (since cover size is based on container’s size).

Thanks!

[Eric]

This reply has been marked as private.

[Lely]

Hi Eric,

Background will always cover its container. How it will resize depends on the container size. When the screen got smaller, the container/section’s height will become higher thus will adjust background size and then stretch it.
Another option you might try is use an image on smaller screen and then background image at large screen. We will hide the image on desktop screen. Add the image again on the right column and then on the class field add hide-in-desktop.

Add something like this:

@media (min-width: 980px){
.page-id-153 #x-section-8 {
    background-image: url(http://ghostswithtypewriters.com/wp-content/uploads/2016/12/17-web-copy.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover  !important;
    background-position: center center !important;
}
.hide-in-desktop{
   display:none;
}
}

Hope this helps.

[Eric]

This reply has been marked as private.

[Eric]

This reply has been marked as private.

[Rue Nel]

This reply has been marked as private.

[Author]

Posts