Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 3, 2017 at 12:16 pm #771043
    force-media

    Hi Guys,

    I am using Enfold Theme and have some text blocks where i did indent the text a little bit. Now i am looking for a CSS solution to center the text but only on mobile view.

    I would appreciate any help from you guys.

    Thanks,
    Frank

    April 3, 2017 at 9:29 pm #771339
    John Torvik

    Hey force-media,

    Thanks for using Enfold.

    Please, may you share your page link? Then I can provide to you the custom CSS code.

    Best regards,
    John Torvik

    April 3, 2017 at 9:39 pm #771347
    force-media

    Hi John,

    please find URL and access details in private content section.

    I want to make sure the text and icons which are on the left beside the shoe will be in the center when viewing this site on a mobile device. Currently it doesn’t work because i have indent text / icons a little bit.

    Thanks,
    Frank

    April 5, 2017 at 1:11 pm #772490
    force-media

    Any updates on this topic?

    April 5, 2017 at 1:41 pm #772512
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
p { text-align: center; }}

    Best regards,
    Yigit

    April 5, 2017 at 2:54 pm #772596
    force-media

    Hi Yigit,
    Thank you for your response. Unfortunately your css code doesn’t gave me the solution i am looking for. Your code has centered the text within the <p>-tag in one of my text elements (yellow-marked), but not all the elements including the two icons.

    I would need preferably a css code who did remove intends i have done but only on mobile devices.

    Best regards,
    Frank

    • This reply was modified 7 years, 8 months ago by force-media.
    April 6, 2017 at 10:30 am #773069
    force-media

    Hi Guys,
    I’ve fixed the issue by doing a small modification of your code sample:

    @media only screen and (max-width: 480px) {
p, h3 { padding: 0 !important; text-align: center !important;}}
    April 6, 2017 at 10:38 am #773071
    force-media

    However,
    I still having a similar problem with a social media widget on mobile devices (see screenshot). The icons below the headline of the widget are not centralized.

    Screen Mobile Device - Widget Items not centralized

    fyi, widget-code:

    <ul class="noLightbox social_bookmarks icon_count_3"><li class="social_bookmarks_facebook av-social-link-facebook social_icon_1"><a target="_blank" href="XXX" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li>
<li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"><a target="_blank" href="XXX" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li><li class="social_bookmarks_twitter av-social-link-twitter social_icon_3"><a target="_blank" href="XXX" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li></ul>

    Would you be able to give me also a kick-off for this issue?
    Thanks,
    Frank

    • This reply was modified 7 years, 8 months ago by force-media.
    April 6, 2017 at 3:32 pm #773260
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .widget .social_bookmarks {
    max-width: 135px;
    margin: auto!important;
    float: none!important;
}

    Best regards,
    Yigit

    April 6, 2017 at 4:30 pm #773304
    force-media

    Thanks, Yigit.

    I have done a small modification in your code, because it should only affect on mobile view. 

    @media only screen and (max-width: 768px) {
.widget .social_bookmarks {
    max-width: 135px;
    margin: auto!important;
    float: none!important;
}}

    It’s working fine on my site now. Please feel free to close this topic.

    April 8, 2017 at 6:55 am #774306
    Rikard

    Hi,

    Great, thanks for sharing your solution. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘How to align a text item into center but only in mobile view’ is closed to new replies.