Images positioning on smaller screens

Support
#1

Hello

I would like the Google, FB, TimeOut, Forbes at the bottom of the landing page to stay in a single row when on mobile. For the images just to go smaller.

How can I do that?

Thank you!

#2

Hi There,

Thanks for writing in!

Do you want something like this?

If that is the case, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
  .el82.x-section .x-column.x-sm.x-1-4 {
    width: 22%;
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 4%;
  }

  .el82.x-section .x-column.x-sm.x-1-4:last-of-type {
    margin-right: 0;
  }
}

We would loved to know if this has work for you. Thank you.

#3

precisely :slight_smile:

the only hing is that for some reason my footer disappears when I add that code. It just disappears in mobile view, nit desktop.

Why does footer disappear in mobile view?

#4

Hey There,

Your footer disappears in smaller screens because of this broken css:

@media only screen and (min-width: 641px) {
.gform_wrapper .top_label li.gfield.gf_left_third+.gform_footer, .gform_wrapper .top_label li.gfield.gf_left_third+li.gfield, .gform_wrapper .top_label li.gfield.gf_middle_third+.gform_footer, .gform_wrapper .top_label li.gfield.gf_middle_third+li.gfield, .gform_wrapper .top_label li.gfield.gf_right_third+.gform_footer, .gform_wrapper .top_label li.gfield.gf_right_third+li.gfield {
    clear: none;
}

There was a missing closing curly brace.

Please have it updated and use this instead:

@media only screen and (min-width: 641px) {
 .gform_wrapper .top_label li.gfield.gf_left_third+.gform_footer, .gform_wrapper .top_label li.gfield.gf_left_third+li.gfield, 
 .gform_wrapper .top_label li.gfield.gf_middle_third+.gform_footer, .gform_wrapper .top_label li.gfield.gf_middle_third+li.gfield, .gform_wrapper .top_label li.gfield.gf_right_third+.gform_footer, .gform_wrapper .top_label li.gfield.gf_right_third+li.gfield {
    clear: none;
 }
}
#5

that does bring back the footer - thank you!

Last question on this: why does the mobile number in footer still appears in white ?

I would like it to be in black - please help?

#6

Hello There,

Your phone number is white because of this custom css:

a[href^="tel:"] {
    color: white !important;
}

You will need to update it and change the color to black. This can be found in the Cornerstone’s page custom css.

Hope this helps. Kindly let us know.

#7

this is probably for the telephone number that appears over my office photo, which does need to be in white.

I need the mobile number in footer to be in black colour like the rest of the text in the footer.

How can I achieve this?

#8

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

.x-colophon a[href^="tel:"] {
  color: #000 !important;
  text-decoration: none;
}

Let us know how it goes!

#9

you are a star! thank you!

this code means the landline number is not underlined, unlike my email or whatsapp number.

I quite like that!

How can I remove the underlining of my email & whatsapp number in the footer?

#10

for some odd reason the code stopped working… and the images are once again in a single column in mobile view… - could you please kindly have a look what is the reason?

thank you!

#11

Hi,

Try adding this custom CSS

.x-colophon #text-8 a {
    text-decoration: none;
}

It looks like that section was update so the previous code doesn’t work anymore. you can replace this

@media(max-width: 979px){
  .el82.x-section .x-column.x-sm.x-1-4 {
    width: 22%;
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 4%;
  }

  .el82.x-section .x-column.x-sm.x-1-4:last-of-type {
    margin-right: 0;
  }
}

with this

@media(max-width: 979px){
  .el81.x-section .x-column.x-sm.x-1-4 {
    width: 22%;
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 4%;
  }

  .el81.x-section .x-column.x-sm.x-1-4:last-of-type {
    margin-right: 0;
  }
}

Hope that helps.

#12

thank you that worked…

but since I have done some further changes, the images have started stacking up again…

can you please help me amend the code?

#13

Hi @tatyana.kozh

Try this CSS

@media(max-width: 979px){
  #reviews .x-column.x-sm.x-1-4 {
    width: 22%;
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 4%;
  }

  #reviews .x-column.x-sm.x-1-4:last-of-type {
    margin-right: 0;
  }
}

Hope this helps.

#14

thank you :slight_smile:
it did work, but not anymore…

it seems like every single time that I run a small update to the landing page - this particular code need updating too?

Is there a way around it?

What is the new code now that I have made slight changes to the page?..apologies…

#15

Hi There,

Ok, please update the given code to this:

@media(max-width: 979px){
  .stay-inline .x-column.x-sm.x-1-4 {
    width: 22%;
    float: left;
    margin-right: 4%;
  }

 .stay-inline .x-column.x-sm.x-1-4:last-of-type {
    margin-right: 0;
  }
}

Then apply the CLASS stay-inline to your section (where the logos are), as long as your section has that stay-inline class, the given code will work even if you re-arrange your sections.


Hope it helps,
Cheers!

#16

it does - thank you so much :slight_smile:

#17

We are delighted to assist you with this.

Cheers!

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.