Docs

[jkneitel]

Hello! I’d like to make the topbar content in my Ethos stack site mobile responsive. On the desktop version of my site, I have an image and text information in a single line (the vertical height of the image is about 50px). However, in the mobile view, the image appears stacked on top of the text.

Is there a way to fix this?

[jkneitel]

This reply has been marked as private.

[jkneitel]

And following up, by responsive I mean making the text info and the image size smaller when viewing on mobile. Ideally, I’d like for both the text info and image to appear across the top of the page before the logo.

[Rupok]

Hi there,

Thanks for writing in! It seems you are using right align for them. It would be better if you make them stack for mobile and align to center.

You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 480px) {
.x-topbar .alignright {
  float: none !important;
  margin: 5px;
}
}

If you want different thing or want to make them smaller; you can write your own CSS within the media query.

Hope this helps.

Cheers!

[jkneitel]

Thank you, I don’t want these items to be stacked or aligned center. I’d like them to appear across one row at the very top of the page.

Can you please help me with writing the CSS within the media query to make these items smaller?

[Rahul]

Hey There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[jkneitel]

This reply has been marked as private.

[Rupok]

Hi there,

Need a bit clarification. Do you want them in same line? Would you attach a screenshot of what you are trying to achieve? Remember there is not enough space on mobile to get them inline like the desktop.

Thanks!

[jkneitel]

Thanks. I would like the contact information and the credit card logos to appear across the top in one line.

Perhaps this can be done by placing the phone number on top of the email address; and have that aligned right. And the credit card logos aligned left.

If this means that either or both the credit card logos and the contact information are made smaller, that’s acceptable.

[Lely]

Hi There,

Please add the following on Appearance > Customize > Custom > Edit Global CSS:

.x-topbar span:first-of-type:after {
    content: "|";
}
.x-topbar span {
    color: blue;
}
@media (max-width: 480px){
.x-topbar span:first-of-type:after {
    content: "";
}
.x-topbar img {
    float: left !important;
    width: 38%;
    margin-top: -24px;
}
div#textbox p span {
    font-size: 10px;
}
div#textbox p {
    display: inline-block;
    width: 60%;
    float: right;
    line-height: 1;
}
}

Update your text HTML code to this:

<div id="textbox"><p class="alignright">
<span> 855-983-2400</span>
<span>[email protected]</span>
</p>
</div>

See attached screenshot of the result.

Hope this helps.

[jkneitel]

That works quite well. The only thing missing is the vertical line (“|”) on the desktop version.

The
span:first-of-type:after {
content: “|”;
seems to have gotten lost somewhere.

[Nico]

Hi There,

While changing the code to achieve the customization you want, it is still not working. Until I discovered that there is an extra bracket added above the code

span:first-of-type:after {
content: “|”;

I have already fix it. You can check it if it okay already.

Thanks.

[jkneitel]

That looks great! Nice fix. Thanks!

[Joao]

Glad to hear it

Joao

[Author]

Posts