How to reduce margins on the left and right side?

  • Unknown's avatar
    thecheesyindian · Member ·

    Hi!

    I have the following questions :

    1. I want to reduce the margins on the sides, so that there is no blank space on either side.

    2. I want to increase the size of the image thumbnails for each post as we scroll down.

    3. When we hover on a tab on the primary menu bar, the width of the dropdown is very wide, how can I reduce it.

    4. I want to remove the appearing of tags/categories on the post.

    Please help!

    Thanks in advance!

    The blog I need help with is madovermarketing.com.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. I want to reduce the margins on the sides, so that there is no blank space on either side.
    2. I want to increase the size of the image thumbnails for each post as we scroll down.

    On a responsive design such as Expound, this can bet quite complex and can render the view on tablets and phones unusable. We can limit this change to the point where things go to a single column for tablets and phones, but there is one caveat. The images are sized by the theme software for the original space. Doing this with CSS means we are asking the browser to enlarge the smaller images, and they will lose quality. Give the following media query a try and look at the image quality. Also narrow down your browser window and also view your site on a tablet or phone, or use the preview buttons at the bottom of the Customizer screen to see how things will look. 

    @media screen and (min-width: 1081px) {
	#page {
		width: 100%;
	}
	.featured-content-secondary article {
		max-width: 23%;
		width: 100%;
	}
	.featured-content-secondary .entry-thumbnail img {
		max-width: 100%;
		width: 100%;
	}
	#primary {
		width: 80%;
	}
	.blog .site-content .has-post-thumbnail .entry-thumbnail img {
		max-width: 150% !important;
		width: 160% !important;
	}
	.blog .site-content .entry-header, .site-content .entry-meta, .site-content .entry-summary {
		margin-left: 400px !important;
	}
}
  • Unknown's avatar
    thecheesyindian · Member ·

    Hello, thanks a lot for the help.

    I have made the changes and customized according to my needs. However, I am still facing one problem.

    I want my primary menu bar to be aligned centrally, but that is making my menu bar look messed up on tablet and mobile. As soon as I remove the central alignment on my top menu bar, the tablet and mobile layout returns back to normal.

    Is there any way I can fix this?

    Thanks.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I’ve replied to you in the other thread you started on this issue at: https://en.forums.wordpress.com/topic/menu-bar-messed-up-in-mobile-and-tablet-view?replies=2#post-2184149

  • The topic ‘How to reduce margins on the left and right side?’ is closed to new replies.