Top1 and top2 aligned and centered on the same row - Forum | JoomShaper
Staff replied Helix Framework

Top1 and top2 aligned and centered on the same row

Asked by Anthony m 4 years ago Last activity 4 years ago

Hi everyone,
I would like top1 and top2 to be aligned and centered on the same line.
I tried various CSS but I couldn't get the result.

Both are displayed in the desktop view, although one on the right and one on the left,
while on tablets and smartphones only top1 (fb icon) is displayed.
I added some images to show how it is currently, and I made a change to the images to show what I would like to achieve.
Thank you

How I would like:
https://ibb.co/tXmCqr8

How I would like:
https://ibb.co/gP0C7yk

current:
https://ibb.co/YP2Y0vd

current:
https://ibb.co/gTSMSX0

6 replies

Oldest first Newest first Most helpful
Christian GRENIER
4 years ago

Hi

display:inline-block; width:50%; text-align:center;

Anthony m Asked this
4 years ago

I've tried it before but it didn't work. which class do you mean?

Rashida Rahman Staff
4 years ago

Hi there!

Thanks for your query.

Please use the following code in your custom.css file:

@media (min-width: 992px){
#sp-top1 .sp-column {
    text-align: right !important;
}
#sp-top2 .sp-column {
    text-align: left !important;
}
}

However, I have checked and you have some missing closing braces in your custom.css file. I tried to indicate those in this screenshot:

https://prnt.sc/26vqdqn

Please add the missing braces, otherwise later codes would not work as intended.

Best Regards

Anthony m Asked this
4 years ago

Hi, thanks for the reply.
And thanks for pointing out some errors in the custom.css file, it is a file that, however, once completed I will have to recompile and clean on the new site.
As for the code you provided now yes on desktop view it works fine,
but as you can see in tablets and smartphones no, only the fb icon comes.
See photo:

https://ibb.co/WP0WRXD

Rashida Rahman Staff
4 years ago

Hi,

You may use the following code instead of the previous media query that I have given you:

@media (max-width: 992px){
#sp-top1{
    width: 30%;
  padding: 0;
}
#sp-top2{
    width: 70%;
  padding: 0;
}
.sp-contact-info li {
  margin-right:5px;
    font-size:10px
}
}
#sp-top1 .sp-column {
    text-align: right !important;
}
#sp-top2 .sp-column {
    text-align: left !important;
}
}

Best Regards

Log in to reply.