Docs

[mgerney]

I have finished a site – but am having some problems with different screen sizes.. Most important, the footer image is very distorted – both on mobile and when you shrink down the browser. is there a way to call a different footer for different screen sizes and redo the footer widgets to be readable? Also there are gaps between the content sections on mobile that don’t exist on desktop or other screen sizes. Is there a way to close up those gaps? The site is:

http://debracantwell.com

Thanks.

[Joao]

Hi There,

You cannot force both width and height to 100% from a picture,

I would reccomend you using :

.x-colophon.top {
    background-size: auto 100%;
}

Hope that helps

Joao

[mgerney]

Thanks – that fixed the footer distortion issue, but there are still gaps between the content bands on mobile. Can you tell me how to fix that?
Thanks

[Joao]

Hi There,

I see what you mean, I believe it is related to the way you built the layout, would you mind providing your admin credentials in a private reply so we can give some advice on how to fix it and re-structure it if necessary.

Thanks

Joao

[mgerney]

This reply has been marked as private.

[Christopher]

Hi there,

Please update h1 heading to :

<h1 style="color: #fff;margin: 0;">MEET DEBRA</h1>

Please add following code in Customize -> Custom -> Global CSS :

.x-video.embed.with-container {
    margin-bottom: 0;
}

update following HTML as well :

<p class="mbn"><font-color="white">Hello there! I’m your honest and capable broker! My twenty-one year service in the U.S. Army taught me much about attention to detail, leadership, active listening, problem solving and evaluating courses of action. The frequent reassignments also allowed experiences dealing with the multitude of activities concerned with relocation and property ownership. Now I’m concerned with YOUR best interests regarding real estate. Come on, let’s get you moving!</font-color="white"></p>

Adding class="mbn" attribute remove bottom margin from elements.

Hope that helps.

[mgerney]

Thank you so much1 This has all worked. You guys are great.

I have just one more issue – on mobile there is a big gap between the 2nd and third widget. It probably has to do with the margin-bottom that I have in my style, but if I take it out, the image shrinks.

I’m sure I’m missing something simple – can you tell me how to fix it?

Thanks

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 767px){
    .footer2 {
        margin-bottom: 0 !important;
    }
}

Hope it helps 🙂

[Author]

Posts