Front page – services sidebar alignment on mobile

[misschristineauParticipant]

Hi guys,
Refer the screenshot from mobile of a new site I am setting up.
Displays fine on desktop however on mobile the alignment of the 3 ‘services’ in that sidebar are not aligned?
Kind regards, Miss Christine.

Attachments:

1. 

   36973030_10155686131213595_109319733865611264_n.jpg
   

[NodaKeymaster]

Hi there

Hope you are having a good day and thank you for your question 🙂 In order to check your question i need to see your live website, please provide url and i will take a look

[misschristineauParticipant]

Thanks Noda – it’s not live yet but if you can give me a window of time (in Australian Eastern Standard Time please), I can make it live for you for a period of time. Alternatively I can message you a user log in?

Kindest, Christine.

[NodaKeymaster]

we can use this method, use this plugin to create temporary access for us, its automatic login link and does not requires sharing your admin details. here is How To guide. at the and don’t forget about  “Set as private reply” at the bottom of the message box  

[misschristineauParticipant]

This reply has been marked as private.

[SupportModerator]

Hello there,

You can use the following CSS code to have the items aligned properly by going to Appearance > Customize > Additional CSS and pasting it there.

#services .widget_illdy_service:nth-child(1), #services .widget_illdy_service:nth-child(2), #services .widget_illdy_service:nth-child(3) {
    display: block;
}

Best Regards,
Support

[misschristineauParticipant]

Great, that’s fixed it on mobile, however now it is left aligned on the desktop view.

Please see attachment. The fix for the alignment needs to be for mobile only, isn’t there a way to code that in that CSS change we made?

Also just a question, if the theme gets an update, will I lose all of my additional css? SO should I save this as a text file or will it remember it in the theme customisations?

• This reply was modified 4 months ago by  misschristineau.

Attachments:

1. 

   FireShot-Capture-34-Complete-Me-Personal-Training-–-by-Denise-Mokad_-http___completemept.com_.au_.png
   

[SupportModerator]

Hi there,
Thanks for writing back.
In that case, please adjust the CSS code to this:

@media only screen and (max-width:768px){
#services .widget_illdy_service:nth-child(1), #services .widget_illdy_service:nth-child(2), #services .widget_illdy_service:nth-child(3) {
display: block;
}
}

You shouldn’t lose the CSS during an update. I would however recommend on carrying out a backup to it.

I hope this helps.
Best Regards,
Support.

[Author]

Posts