Support » Fixing WordPress » Cannot Solve these Mobile layout issues for the life of me. Please help!!

  • Hello,

    I am struggling a bit with getting the right layout on my newly created website. Here is what I was hoping you could help me out with because after much searching I couldn’t find an answer that worked for me.

    1. I want to specify that at 980px width, my website will go into it’s “mobile” view. I am on the Responsive Theme and it changes views at around 650 px. I’m sure the code is simple, but I just couldn’t find it anywhere.

    2. When my site does go into mobile, I wan’t the container to take up 100% of the width. Right now, once it goes into mobile view, there is a bunch of space to the left and right of container that shows the background image. This takes away from precious areas where there could be text for easier reading. Need advice on this please. If this is not clear i can post some pics.

    3. When the site goes into mobile layout, I also want to have different font sizes than what shows up in the default desktop view. How can I do this? As of right now, when it goes into the mobile view it carries over the font sizes from the original view and is too big and takes up too much space.

    Thank you so much for your time and help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You really need to first link the webpage(s) in question.

    Thread Starter jiggyp91

    (@jiggyp91)

    Here is the link. Hopefully it helps.

    Here are some screenshots that describe what i’m requesting help for.
    ———————————————————————-
    1. this is what my site does at 980px: http://postimg.org/image/e2q97zga7/

    this is what i’d like my site to do at 980px or lower (menu): http://postimg.org/image/r9u1czdef/

    ———————————————————————-
    2. this is what my site does once it’s in mobile view: http://postimg.org/image/rmmclxoff/

    this is what i’d like my site to do once its in mobile view: http://postimg.org/image/aqoz2jga9/
    ———————————————————————–

    3. this is what my site does in mobile view with regards to font: http://postimg.org/image/4k43bh8yf/

    as you can see this font is so big and it doesn’t resize in this layout.

    Thanks for your help.

    Hi

    look for @media screen and (max-width: 650px) in you style.css and make a child theme to add your new style sheet and change the max width to 980px to fire the desk top version at the larger size.

    You can also set up media css conditionals for your text size etc.

    Kevin

    Thread Starter jiggyp91

    (@jiggyp91)

    Thank you Kevin, I will give it a shot.

    This may sound like a silly question, but when i go into the original responsive theme > theme options > editor > style.css file, I only see a block of comments at the top. There is no actual code there.

    Is there another place I should be looking to find the code in the style.css sheet so that I can modify the changes and put it into my child theme?

    I did find an rtl.css file that does contain the code I’m looking for, I believe. Just wanted to double check.

    Thanks!

    Hi

    I don’t know the theme unfortunately so can not help. Look in the folders of the theme to see if there is a separate folder for css files. Some complex themes will separate it.

    For your container issue you need to set the container size in the mobile media section to 100%!important; and then play with the padding settings – you could try padding:0!important; to start with.

    from what I can see using google developer tools there is a css file in /core/css/ folder of your theme.

    Kevin

    Thread Starter jiggyp91

    (@jiggyp91)

    Kevin, can you please direct me to the /core/css folder. I cannot find it anywhere.

    Hi

    Sorry I don’t know the theme so I can not help you.

    What I see in google tools is that the style.css is in a folder
    responsive > core > css

    Trying to find files in complex themes using the internal wordpress file editor is not easy and you may find it better to download the theme from your website via ftp and find the file that way.

    Kevin

    Thread Starter jiggyp91

    (@jiggyp91)

    Ok thank you. I am actually moving on from this theme. Causing too many frustrations :/

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Cannot Solve these Mobile layout issues for the life of me. Please help!!’ is closed to new replies.