Mobile headings breaking column width

LKS · August 30, 2017, 2:16pm

Hi,
I’m having a issue with Heading, URLS & audio players breaking the column width on portfolio items on mobile view.
At the moment I have the feature image & text columns side by side, but when I view on a phone the above items extend outside the column width & it looks a mess!
I added the following code, supplied by you guys
p, p * {
word-break: break-all !important;
}

But thats breaks apart words all throughout the site, creating another problem.

Is there anyway to reduce heading size & break URLS for just mobile?

Also is it possible to add a spotify logo to the social icons on the footer?

Jack · August 31, 2017, 4:34pm

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

friech · August 31, 2017, 4:28am

Hi There,

Thank you for writing in, I’d advice that you utilize the Responsive Text Settings

Create two responsive text settings, one for URLs and one for Headlines.

Play with the compression, min-size and max-size until you get the desired look.

Cheers!

LKS · August 31, 2017, 4:59am

Thanks for your help!
How can I apply this to portfolio items though?
Also is it possible to add a spotify logo to the social icons on the footer?

ruenel · August 31, 2017, 11:35am

Hello There,

Thanks for updating in!

1.) Are you using Cornerstone in creating your portfolio item? If not, then you must make use of the responsive text shortcode and add it in your portfolio item content description. You can check out the shortcode here: http://demo.theme.co/integrity-1/shortcodes/responsive-text/

2.) Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook' );
    $twitter     = x_get_option( 'x_social_twitter' );
    $google_plus = x_get_option( 'x_social_googleplus' );
    $linkedin    = x_get_option( 'x_social_linkedin' );
    $xing        = x_get_option( 'x_social_xing' );
    $foursquare  = x_get_option( 'x_social_foursquare' );
    $youtube     = x_get_option( 'x_social_youtube' );
    $vimeo       = x_get_option( 'x_social_vimeo' );
    $instagram   = x_get_option( 'x_social_instagram' );
    $pinterest   = x_get_option( 'x_social_pinterest' );
    $dribbble    = x_get_option( 'x_social_dribbble' );
    $flickr      = x_get_option( 'x_social_flickr' );
    $github      = x_get_option( 'x_social_github' );
    $behance     = x_get_option( 'x_social_behance' );
    $tumblr      = x_get_option( 'x_social_tumblr' );
    $whatsapp    = x_get_option( 'x_social_whatsapp' );
    $soundcloud  = x_get_option( 'x_social_soundcloud' );
    $rss         = x_get_option( 'x_social_rss' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="&#xf082;" aria-hidden="true"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="&#xf0d4;" aria-hidden="true"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="&#xf08c;" aria-hidden="true"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="&#xf169;" aria-hidden="true"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="&#xf180;" aria-hidden="true"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="&#xf166;" aria-hidden="true"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="&#xf194;" aria-hidden="true"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="&#xf0d3;" aria-hidden="true"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="&#xf17d;" aria-hidden="true"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="&#xf16e;" aria-hidden="true"></i></a>'; endif;
      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="&#xf092;" aria-hidden="true"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="&#xf1b5;" aria-hidden="true"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="&#xf174;" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="whatsapp" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="&#xf232;" aria-hidden="true"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="&#xf1be;" aria-hidden="true"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="&#xf143;" aria-hidden="true"></i></a>'; endif;

      // Add spotify here:
      $output .= '<a href="https://spotify.com/user/#" class="spotify" title="Spotify" target="_blank"><i class="x-icon-spotify" data-x-icon="&#xf1bc;" aria-hidden="true"></i></a>';

    $output .= '</div>';

    echo $output;

  }
endif;
// =============================================================================

Please do not forget to insert the Spotify link in the code provided above.

Please let us know how it goes.

LKS · September 4, 2017, 3:24pm

Thanks! The spotify link worked perfect!

I’m having trouble with the responsive text though.

Is there a way to make the all portfolio headlines scale down for mobile with CSS? rather than adding shortcode to individual pages?

nabeel · September 4, 2017, 4:21pm

Hi again,

You can add the following code in your Customizer:

@media screen and (max-width: 767px) {
  .entry-title-portfolio {
      font-size: 28px !important;
  }
}

Adjust the font size as per your need.

Hope this helps!

LKS · September 4, 2017, 5:41pm

Thanks for your help! I’ve added that but it doesn’t seem to be having any effect!
The headline is still breaking outside of the column on mobile (landscape view)
Anything else I can try to resolve this?

jade · September 4, 2017, 6:11pm

Hi there,

Please try to decrease the value of the font size in the previous code provided.

If the issue persists, please provide the URL of your site.

LKS · September 4, 2017, 9:28pm

Hi, Sorry I’m still having the problem! Can you please take a look? I’ve added a secure not with logins above.

thanks!

lely · September 5, 2017, 8:02am

Hi There,

It is not working because of CSS syntax error.
See the space betweeb 28 and px? Please remove it. Should be like this:

@media screen and (max-width: 767px) {
  .entry-title-portfolio {
      font-size: 28px !important;
  }
}

Hope this helps.

LKS · September 5, 2017, 8:26am

Thanks Lely,

Unfortunately that still doesn’t see to have any effect even when I adjust the font size it still doesn’t seem to change.

Is there anything else I can do to fix this problem? Its the only thing stopping me from launch this website.

Also is there anyway to contain the spotify player within the column on mobile view?

Thanks

paul.r · September 5, 2017, 9:04am

Hi,

It seems to work fine on my end.

With regards to spotify, can you provide us the url of the page and a screenshot on how it looks in your end.

Thanks

LKS · September 5, 2017, 9:58am

Unfortunately I’m still seeing it when I view on my phone, as you can see below

Any solution to this?

thanks

jade · September 5, 2017, 1:19pm

Hi there,

I went over the page on the site but I can;t seem to find the section that is in the screenshot is.

Would you mind providing the direct link to that page so that we can check it?

Thank you.

LKS · September 5, 2017, 1:38pm

Thanks for your help!

The link is

http://lowkeysource.com/uncategorized/house-shoes-spotify-playlist/

but this isn’t the only page where I’m having this issue.

nabeel · September 5, 2017, 2:42pm

Hi there,

Please add the following code in your Customizer:

@media screen and (max-width: 480px) {
.entry-title {
    font-size: 100% !important;
}
}

Let us know how this goes!

LKS · September 5, 2017, 3:05pm

Yep that works! thanks so much!
Is there anything that can be done to contain the spotify player within the column?

nabeel · September 5, 2017, 4:56pm

Hi again,

You can use CSS media queries to make adjustments. You can check out https://www.w3schools.com/css/css3_mediaqueries_ex.asp for more details.

Cheers!

LKS · September 7, 2017, 5:23am

thanks again!
One more thing, i seem to be getting a gap on the right hand side of the home page in safari where the page scrolls, any idea whats causing this?