margins on smartphones

Support Area Forums Responsive Visual margins on smartphones

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question:
  • Author
    Posts
  • #15081
    Gor
    Participant

    Hi Bill,

    I have some problems viewing the template in my smartphone (in this case iPhone), do not adjust the margins of the text and the videos.

    I add a couple of pictures for you to see more clearly.

    greetings

    Gorka

    #15085
    Bill Robbins
    Moderator

    Good Morning,

    I hope you had a nice weekend. I believe we can straighten out the padding there a bit for you. Give this a try:

    1. Go to the Theme Options page and select the Styling tab.
    2. Scroll down to the Custom CSS box and paste this:
      
      @media only screen and (max-width: 767px) {
      	
      	#sidebar,
      	#content,
      	#content.full {
      		width: 100%;
      		padding: 20px;
      		-moz-box-sizing: border-box; 
      		-webkit-box-sizing: border-box; 
      		box-sizing: border-box; 
      	}
      
      	.featuredpage .widget-title {
      		-moz-box-sizing: border-box; 
      		-webkit-box-sizing: border-box; 
      		box-sizing: border-box; 
      	}
      	
      	.featuredpage img {
      		width: 100%;
      		max-width: none;
      	}
      
      }
      
    3. Update your settings.

    That should even things out. If you have any questions or trouble, just let me know.

    Thanks,
    Bill

    #15104
    Gor
    Participant

    Hello bill,

    thanks for the solution

    this solves the problem of margins on pages and post. But I still have the problem by introducing the videos directly with the url in the posts.

    As a temporary solution I have writed the code by giving iframes with specific height and width, now they fit well on my smartphone but they are too small on monitor views

    <iframe width="260" height="146" src="//www.youtube.com/embed/J1UyiKNaoeg" frameborder="0" allowfullscreen></iframe>

    I would like to have a standard width and height and they will change to different margins tablets or smartphones.

    I tried changing the percentage of the width

    . video-content {
    width: 86%;
    padding: 2%;
    }

    adding it to the code you gave me, I found it on line 1290 of style.css within / * Small Tablets & Phones * / but does nothing.

    sorry for the inconvenience

    Gor

    #15105
    Bill Robbins
    Moderator

    Gor,

    For the videos, there are two options for you. You can add them by making the page/post use the video format. Then place the embed code in the box for it and the theme will make the video responsive automatically.

    There’s also a shortcode for making videos responsive in the content of a page/post. To do that, use this:

    Just replace the your video URL or embed code with either the URL to your video on a service that supports oembed like YouTube or Vimeo or the actual embed code if you’re adding this to the text and not visual editor.

    See how that works for you. You’ll probably want to change back the video style in the style.css file.

    Bill

    #15106
    Gor
    Participant

    Ok well done!

    I didnĀ“t know the second option, I think I’ll choose it.
    I have tested and seems that works great.

    Thanks once again

    regards

    Gorka

    #15107
    Bill Robbins
    Moderator

    Anytime Gorka. Have a good night.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘margins on smartphones’ is closed to new replies.