Top1 And Top2 Aligned And Centered On The Same Row - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Top1 And Top2 Aligned And Centered On The Same Row

AM

Anthony m

Helix Framework 3 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

0
6 Answers
Order by
Oldest Newest Votes
CG
Christian GRENIER
Accepted Answer
3 years ago #57189

Hi

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

0
AM
Anthony m
Accepted Answer
3 years ago #57192

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #57204

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

0
AM
Anthony m
Accepted Answer
3 years ago #57258

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

0
AM
Anthony m
Accepted Answer
3 years ago #57398

How can I get a similar result also in tablet and smartphone view?

https://ibb.co/K0LLbcx

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #57515

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

0