diet_code

Thanks for the quick reply ??

No, you’re right. It must have been my browser which had isssues displaying this particular post. Sorry for the hassle!

However,I installed the TinyPNG, compressed the images and it still takes forever for the website to load. Any idea what I’m doing wrong?

On top of that, a lot of the pictures appear pretty blurry when on mobile view. Do you know how to solve that problem?

Oh, and is there any way to deactivate endless scrolling?

Best wishes!

layerednonsense.com

Thank you so much! It’s working perfectly ??

Hi Ben,
I am really sorry for not getting back to you sooner. Truth is, I have a lot going on, right now. Nevertheless I just want to say thank you – it worked nearly perfectly! All I had to do was inserting

.menu-primary {
 border: 3px solid #000000;
  }

into my style sheet, since the black border around the menu-items was missing when on mobile view.
There are only two tiny things, before I’ll stop annoying you (for quite some time, I hope ?? ):
When on mobile, the FAVORITES slider seems to be a bit off center (in comparsion to the instagram widget). I already tried setting “center align” in the meta-slider plug-in, but that obviously didn’t work out. What’s your guess?
Also, when opening the menu on mobile view, the first and last item seem don’t have the same distance to the menu border. Above that, is it possible to reduce the box-width, so the menu appears less stretched?

I’m really thankful for all the effort and time you’ve put into trying to help me so far. Thank you so much.

I’m sorry to bother you again, but it’s not working properly.

I managed to get rid of the menu-border on mobile view, but when I opened the menu, all of the items were moved to the left.

Also, the logo is still huge on mobile view. Is there any way to make it smaller?

Oh and sorry for confusing you: All I wanted was to add a border to the bottom of the instagram-widget and not around all widget.
In addition to that, the slider on the sidebar looks a bit off center on mobile view. Can I add padding-left, so it is moved ‘more’ to the center?

Here is my CSS:

@media all and (min-width: 50em) {

.menu-primary a,
 .menu-primary a:link,
 .menu-primary a:visited {
   color: #333;
 }

 .menu-primary {
   border: none !important;
 }
 #menu-primary-container {
   border: 3px solid #000 !important;
 }

.menu-primary-items {
font-size: 130%;
}

}

.menu-primary-items {
padding: 12px;
}

@media all and (max-width: 800px) {

 .metaslider {
   left: -7.25%;
   width: 114.5%;
 }

.widget {
   text-align: center;
 }
}

.title-container {
 margin-bottom: 3em !important;
}

.menu-primary {
   width: 100%;
 }

 .menu-primary-items li {
   margin-right: 0;
   width: 16%
 }

#menu-primary-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#max-width {
 max-width: 960px;
}

.menu-primary-items {
   padding-top: 12px;
   width: 100%;
   text-align: center;
 }

.sidebar-primary {
padding-top: 100px;
}

.search-form {
padding-bottom: 40px;
}

.widget input[type="search"] {
 max-width: 150px !important;
}

.favorites-title {
    border-top: 1px solid #eee;
    position: relative;

    font-family: "Open Sans",sans-serif;
    font-size: 17px;
    padding-bottom: 20px;
    padding-top: 15px;
    text-align: center;
    text-transform: uppercase;
}

.snapwidget-title {
    border-top: 1px solid #eee;
    position: relative;

    font-family: "Open Sans",sans-serif;
    font-size: 17px;
    padding-bottom: 20px;
    padding-top: 15px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: solid 1px #e5e5e5;
}

.post-container {
padding-top:20px;
}

We’re nearly there.

I did like you told me and the code for the logo and slider worked like a charm. When implementing the code for the menu-items, however. it created a solid line near the menu-button and moved the menu-items to the left (they’re still pretty big).

Also, the sidebar widget-code created a border between every widget on desktop-view, while only the mobile version displayed what I wanted (a border between search-bar, favorites, Instagram and “recent rants”). The favorites-slider and Instagram-widget are still located on the left (and not centered) on mobile view.
Any thought on this?

Part of the problem is, that my css-stylesheet ist just way too cluttered, I guess…

Ben. You. are. amazing. IT WORKED!

One last thing (for now ?? ): The menu items and logo look huge on mobile view while the front slider is pretty small. Is there any way to make the slider bigger (so it spans across the screen like on the mobile view of isaaclikes.com) and to make the menu items and the logo comparatively small?
Also, when I scroll all the way down, the “sidebar” looks kinda squeezed together (no space and not centered; there’s no separation line for the favorites and the instagram widget like there is on desktop view) and the items are way too big as well (see mobile view of isaaclikes.com for how I’d like them to be).

Hey Ben,

thank you so much for your response! I know I’m asking a lot and I greatly appreciate your effort in trying to help me.

I did like you told me (padding-top: 12px), but couldn’t identify any change in the distance between border and first menu-item on mobile view.
Also, when inserting the code for rearranging the social media icons, it positioned the icons at the center of the menu bar and not below the logo.
Any ideas on how to approach this?

Oh and thanks for the tutorial! Now I know how to preview the images in a post ??

Hi Ben,

first of all: sorry for the late reply and thank you so much for helping me out this far.

However, I still have some questions. When on mobile view the first item in the menu bar is too close to the border (compared to the “about”). Any ideas on how to solve that?

Also, is there a way to display the first picture in the preview of a post? And is it possible to use different fonts in one post?

Apart from that, I’d love to arrange my social icons like this (it’s my tumblr), so that they’re right below the “L”.

Furthermore, do you know how to insert an instagram widget like this one (see sidbar)and these social icons on top?

Sorry for all these questions. I’m still figuring out how coding works.

Best wishes!

also: is there an easy way to change the font to any font I want (like a custom one)?

Hi Ben,

sorry for not specifying my request any further.
I mean the stylesheet of my child theme.

Dear Dave,

I actually have.

Here is the link to my website.

Also, is there a way I can actively modify my images without them being cropped, so they originally fit the 960×400 slider?

Best wishes

Dear Ben,
it worked like a charm! Thank you so much! You’re a star.

This ist just for looks, but can I make the stylesheet less ‘crowded’?

Best wishes

First of all: Thanks for helping me out!

Having done this my website looks like this.

Any idea what went wrong?

Here’s my stylesheet:

.logo {
position: relative;
top:-30px;
}

.menu-primary {
 border: 3px solid #000000;
  }

@media all and (min-width: 50em) {

#menu-primary {
   width: 100%;
 }
 #menu-primary-items {
   width: 100%;
   text-align: center;
 }
 #menu-primary-items li {
   margin-right: 0;
   width: 16.666%
 }

 .menu-primary {
   border: none !important;
 }

 #menu-primary-container {
   border: 3px solid #000 !important;
 }

#menu-primary-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.menu-primary-items {
padding: 12px;
font-size: 130%;
}

#max-width {
 max-width: 960px;
}

.sidebar-primary {
padding-top: 100px;
}

.search-form {
padding-bottom: 40px;
}

.widget input[type="search"] {
 max-width: 150px !important;
}

.favorites-title {
    border-top: 1px solid #eee;
    position: relative;

    font-family: "Open Sans",sans-serif;
    font-size: 17px;
    padding-bottom: 20px;
    padding-top: 15px;
    text-align: center;
    text-transform: uppercase;
}

.post-container {
padding-top:20px;
}

Also, is there any way to change the font colour to solid black? Right now it’s kinda grey and when clicked it turns to black. Can you reverse it?

Plus, is it possible to make the gap between the logo and the menu bar smaller?

Best wishes!

Sweet! It worked like a charm ??
Thank you so much!

Thanks!
It worked fantasticly with the mobile version, but on the regular site the navbar only wraps around my two menu-items and still doesn’t align with the slider.

Any ideas on how to approach this?

website: layerednonsense.com