Page layout changes for mobile view

Home Forums Freedom Free Page layout changes for mobile view

This topic contains 11 replies, has 5 voices, and was last updated by  kris.mento 3 months, 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1317736

    kris.mento
    Participant

    Hi guys!

    Thanks again for all your great work the last time you helped me. I have left a review 🙂

    I’m still not quite satisfied with the mobile view of my site though so I hope you can help me a bit more…

    I’d like my photo on the ‘About’ page to be smaller so the words on the right of it are not so squashed and I’d like the words of my post to have a small margin of space around them so they’re not on the edge of the cellphone screen.

    Is there a way to fix this with some code?

    Link to my site:

  • http://www.kris513.co.za
  • Regards,
    Kris

#1317823

ashishsthanp
Moderator

@kris.mento

You can add following code inside Appearance > Customize > Additional CSS :

.home .page img {
  width: 200px;
}

@media screen and ( max-width: 768px ) {
  .home .pf-content {
    padding: 40px;
  }
}
#1317919

kris.mento
Participant

Thanks so much! I really appreciate your help 🙂

#1318361

Nima
Moderator

Hi kris.mento,

Happy to know your issue is resolved.
We would really appreciate if you could provide us a review here:
https://wordpress.org/support/theme/freedom/reviews/?filter=5

Thanks!
ThemeGrill Support Team

#1318413

Wolfneo
Participant

Hi,

Have you tested your site on Google’s mobile test?

I read that this is not optimized to reduce a thumbnail of the code, that harm at SEO

#1319017

ashishsthanp
Moderator

@Wolfneo
We’ve tested our demo site and it is not showing any suggestion as you mentioned.
SEO depends on various subjects and our theme is SEO friendly.

View post on imgur.com

#1319230

Annette Rios
Participant

helpful discussion

#1320244

kris.mento
Participant

Hi

I just need to revisit this topic again because I now need to know how to change this code that you gave me so that all of the pages and blog posts of my website can have the same padding around the cellphone screen:

@media screen and ( max-width: 768px ) {
.home .pf-content {
padding: 40px;
}
}

At the moment, your code only works for my home page.

Thank you guys!

Regards,
Kris

#1320369

ashishsthanp
Moderator

Hello, @kris.mento

Can you provide us URL of your website so that we can inspect it and give you a proper solution?

#1320373

kris.mento
Participant

Sorry, it’s http://www.kris513.co.za

Regards,
Kris

#1320548

ashishsthanp
Moderator

@kris.mento
Replace the above code with:

@media screen and ( max-width: 768px ) {
  .pf-content {
    padding: 40px;
  }
}
#1320660

kris.mento
Participant

Thank you so much! 🙂

Regards,
Kris

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.